具有 api 历史回退功能的 Webpack 开发服务器不适用于 React Router v6 参数化路由

问题描述 投票：0回答：1

像这样在本地使用 Webpack 开发服务器：

  devServer: {
    historyApiFallback: true
  }

我使用 React Router v6 进行了路由器设置，如下所示：

<Routes>
  <Route
    path='/'
    element={
      <AppLayout>
        <Outlet />
      </AppLayout>
    }
  >
    <Route index element={<Dashboard />} />
    <Route path='/user' element={<UserList />} />
    <Route path='/user/:id' element={<UserDetails />} />
  </Route>
</Routes>

现在，当我刷新

/user
时，我正确地看到正在加载的用户路由

如果我点击

/user/1
的链接，路线就会正确加载

但是，当我刷新

/user/1
时，我看到没有加载路线

有人知道这里的问题是什么吗？我在以前版本的react router上没有遇到过这个问题

reactjs webpack react-router webpack-dev-server
1个回答
0
投票

我知道这已经很旧了，但对于其他来到这里并遇到同样问题的人来说，这就是我解决问题的方法。

在我的 webpack.config 中，我更新了 

devServer.historyApiFallback
键：

historyApiFallback: {
      rewrites: [{ from: /./, to: '/index.html' }],
      index: 'index.html',
    },

在我的index.html中的

<head>
标签中我添加了：
<base href="/" />
这允许深度路由与React路由器一起使用。当尝试在该嵌套路径加载 html 时，导航到 
/child/another-child/last-child
并刷新不会导致 404 错误。它重写了所有路径以指向 
/index.html
因为我正在使用 SPA，这是有道理的。然后代码可以根据路径渲染正确的 JSX。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.