reactjs - 升级 React 后 React Router 停止工作

Question

我将 React 从 v16.0.0 升级到最后一个版本以使用 Hook，升级后，React Router 停止工作。

这是 AppRoute 代码：

import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
import DashboardPage from '../components/DashboardPage';
import HelpPage from '../components/HelpPage';
import NotFoundPage from '../components/NotFoundPage';
import LoginPage from '../components/LoginPage';
import PrivateRoute from './PrivateRoute';
import PublicRoute from './PublicRoute';

export const history = createHistory();

const AppRouter = () => (
  <Router history={history}>
    <div>
      <Switch>
        <PublicRoute path="/" component={LoginPage} exact={true} />
        <PrivateRoute path="/dashboard" component={DashboardPage}/>
        <Route path="/help" component={HelpPage} />
        <Route component={NotFoundPage} />
      </Switch>
    </div>
 </Router>
);

export default AppRouter;

我越来越：

输出

非常感谢！

奥里

Answer 1

中的路由器组件react-router-dom实际上称为BrowserRouternot Router，因此将Routerimport 和 Tag 更改为BrowserRouter或 Just Provide an alias 并且它应该可以在不更改标签的情况下工作

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

而不是createHistory使用createBrowserHistory

import { createBrowserHistory } from "history";
export const history = createBrowserHistory();

参考这里

代码沙箱在这里

Answer 2

尽量不要将逻辑与 UI 结合起来

// ...code...
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
// ...code...
const AppRouter = () => {
   const [loggedIn, setLoggedIn] = useState(false)

   return (
     <Router>
         <Switch>
           {
              !loggedIn 
              ? <Route exact path="/" component={LoginPage} />
              : <Route exact path="/dashboard" component={DashboardPage}/>
           }
           <Route exact path="/help" component={HelpPage} />
           <Route component={NotFoundPage} />
         </Switch>
    </Router>
   );
}