React-router-dom 路由器不工作。 只跳转到 404 页面

Question

我正在一个小项目中使用 react router。 我最初让我的AppRouter与BrowserRouter AppRouter工作，一切正常。 但我不得不切换到Router这样我才能添加我自己的历史对象。 使用Router我的页面导航不起作用，而是直接跳转到我的 404 页面。 任何关于我做错了什么的建议将不胜感激。

import React from "react";
import AddExpensePage from "../components/AddExpensePage";
import EditExpensePage from "../components/EditExpensePage";
import ExpenseDashboardPage from "../components/ExpenseDashboard";
import Header from "../components/Header";
import HelpPage from "../components/HelpPage";
import NotFoundPage from "../components/NotFoundPage";
import { createBrowserHistory } from "history";
import LoginPage from "../components/LoginPage";

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

export const history = createBrowserHistory();

const AppRouter = () => (
  <Router history={history}>
    <div>
      <Header />
      <Switch>
        <Route path="/" component={LoginPage} exact={true} />
        <Route path="/dashboard" component={ExpenseDashboardPage} />
        <Route path="/create" component={AddExpensePage} />
        <Route path="/edit/:id" component={EditExpensePage} />
        <Route path="/help" component={HelpPage} />
        <Route component={NotFoundPage} />
      </Switch>
    </div>
  </Router>
);

export default AppRouter;

Answer 1

您必须使用BrowserRouter组件包装您的路由，例如：

const AppRouter = () => (
  <Router history={history}>
    <div>
      <Header />
      <BrowserRouter>
      <Switch>
        <Route path="/" component={LoginPage} exact={true} />
        <Route path="/dashboard" component={ExpenseDashboardPage} />
        <Route path="/create" component={AddExpensePage} />
        <Route path="/edit/:id" component={EditExpensePage} />
        <Route path="/help" component={HelpPage} />
        <Route component={NotFoundPage} />
      </Switch>
      </BrowserRouter>
    </div>
  </Router>
);

Answer 2

我建议您继续使用BrowserRouter 。 尽管您使用的路由器类型，React Hooks 现在可以使用历史记录。

从ReactRouter 文档 中， useHistory可以为您提供帮助：

useHistory挂钩使您可以访问可用于导航的历史记录实例。

要访问路由组件内应用程序中任何位置的history对象，您可以在该组件内执行以下操作：

let history = useHistory();

然后您可以访问history.push()和其他您希望调用的方法来处理history 。

---

结论：

不要切换到<Router> ，继续使用<BrowserRouter>并使用钩子使用useHistory访问history 。