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 。