react-router-dom 仅适用于重新加载，是否有任何解决方案或其他方法可以重定向到其他页面？

问题描述

我正在尝试使用“react-router-dom”和“history”模块重定向到 reactjs 中的另一个页面。但它更改了 url 并加载了一个空白视图，需要重新加载才能加载组件。

这是我的代码：

index.js :

import ReactDOM from 'react-dom';
import reportWebVitals from './reportWebVitals';
import {browserRouter} from "react-router-dom";
import Routes from "./routes";

ReactDOM.render(
  <React.StrictMode>
      <browserRouter>
        <Routes/>
      </browserRouter>

  </React.StrictMode>,document.getElementById('root')
);

reportWebVitals();

routes.js

import { Router,Switch,Route } from 'react-router-dom'
import FirstPage from "./first";
import SecondPage from "./seconsPage";
import history from "./history";

export default function Routes() {
    return(
        <Router history={history}>
            <Switch>
                <Route path="/" exact component={FirstPage} />
                <Route path="/second" component={SecondPage} />

            </Switch>
        </Router>
    )
}

history.js

import {createbrowserHistory as history} from "history";

export default history();

first.js

export default function FirstPage() {
    const btnClicked = () => {
        history.push('/second');
    };
    return(
        <div>
            <h3>First Page</h3>
            <button onClick={btnClicked}>click</button>
        </div>

    )
}

seconsPage.js

export default function SecondPage() {
    return(
        <h3>Second Page</h3>
    )
}

我使用“history”v5.0.0 和“react-router-dom”v5.2.0

我也尝试过 stackoverflow.com 上的所有解决方案，但没有一个对我有用。 是否有任何解决方案或其他模块或方法或教程可以重定向到 reactjs 中的其他页面？

解决方法

为了使它工作，请使用 history v4，例如4.10.1.

请在这里找到它：https://codesandbox.io/s/cocky-tdd-oecnk

package.json：

"history": "4.10.1","react": "17.0.1","react-dom": "17.0.1","react-router-dom": "5.2.0",

原因：https://github.com/ReactTraining/history

Documentation for version 5 can be found in the docs directory. This is the current stable release. Version 5 is used in React Router version 6.

Documentation for version 4 can be found on the v4 branch. Version 4 is used in React Router versions 4 and 5.