在本地使用Webpack dev服务器,如下所示:
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 Route
如果我点击一个链接到/user/1
的路由是正确加载
但是,当我在/user/1
上刷新时,我看不到已加载的路由
有人知道这里的问题是什么吗?我在以前版本的react路由器上没有遇到过这个问题。
1条答案
按热度按时间cetgtptt1#
我知道这是旧的,但对于任何人,在这里土地和有同样的问题,这是我如何解决它。
在我的webpack.config中,我更新了
devServer.historyApiFallback
键:字符串
在index.html的
<head>
标签中,我添加了:<base href="/" />
这允许深度路由与react路由器一起工作。导航到/child/another-child/last-child
并刷新不会导致404错误,当它试图在嵌套路径加载html时。它会重写所有路径以指向/index.html
,因为我使用SPA,这是有意义的。然后代码可以处理渲染基于路径的正确JSX。