Route 使用 React 给出 404

Question

我的站点中有一个 link：

<a href="/en">
    <li className="lang">ENGLISH</li>
</a>

还有一条路线：

<Route history={browserHistory} path="/en">
    <HomeLayoutEn />
</Route>

但是当我点击 link 时，我得到了 404

最初，我的 link 是：

<Link to="/en">
    <li className="lang">ENGLISH</li>
</Link>

但我将其更改为 html link，因为我对 SPA 路由不感兴趣，并且在手动访问 url 时我遇到了 404 问题。

知道失败的原因吗？

Answer 1

使用来自 React-router 的 Link 组件而不是锚标记，因为锚标记将使用浏览器历史记录 API 而 Link 使用路由器组件使用的历史对象并且您的整个路由都由 Router 管理。

此外，您需要在 Router 组件上指定 history 而不是 Route，而 Route 组件只需要简单地指定路径。此外，您将在层次结构的顶层有一个 Router 组件

<Router history={browserHistory} >
    <Route path="/en" component={HomeLayoutEn} />
</Router>

和Link将用作

<Link to="/en">
    <li className="lang">ENGLISH</li>
</Link>

现在，如果您希望在没有 SPA 的情况下使用 anchor tag，那么您需要为每条路线生成不同的包输出 html

Route is giving 404 with React