路由在使用 webpack 的反应应用程序中不起作用

Question

我正在尝试使用webpack 创建一个react 应用程序，它也有一些路由。

 "react-router-dom": "^5.2.0",

路由有效，但是当我转到特定路由并重新加载页面时，它会给出错误 cannot get /about

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

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

如this回答中所述，添加

devServer: {
    historyApiFallback: true,
  }

解决了在本地运行时的问题，但是一旦我部署它，我就会得到同样的错误

Answer 1

发生这种情况是因为您的服务器在被/about 路由命中时不知道该做什么，最初是在浏览器没有资产文件（HTML、JS 等）时。仅当您位于 /about 并刷新页面时才会发生。

React 路由器是客户端路由器，因此浏览器需要完全加载客户端资产才能处理您的路由。

您需要做的就是配置您的服务器以将您的所有资产提供给客户端，即使它被未知路由击中。即当服务器出现 404（未找到）情况时，您的服务器仍应提供所有在路由位于 / 时会交付的资产。

并且您的反应路由器应该在客户端处理 404（未找到）事件。如下，

<Router>
  <div>
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/users">Users</Link>
        </li>
      </ul>
    </nav>
    <Switch>
      <Route exact path="/about">
        <About />
      </Route>
      <Route exact path="/users">
        <Users />
      </Route>
      <Route exact path="/">
        <Home />
      </Route>
      <Route path="*">
        <h2>Page Not Found</h2>
      </Route>
    </Switch>
  </div>
</Router>

请记住，如果您想嵌套路由，请从父级Route 中删除exact 属性。