React路由在浏览器上输入有效url时，保持重定向到登录页

Question

我有这种路由配置，它运行得很好，但只有一件事一直困扰着我：即使导航应用程序有效，当我转到地址栏并点击回车键时，它也会将我重定向到/add user，即使我没有更改url并点击回车。

这是我的路线配置：

function AppRoutes({ setLoading }) {
const routes = [
{
key: keys.ADD_USR,
path: '/add-user',
// eslint-disable-next-line react/display-name
renderComponent: (crumbs) => <AddUserData crumbItem={crumbs} />,
crumbs: [
{
selected: 'false',
link: `${prefix}/add-user`,
accessibilityText: 'Add user',
linkTtile: 'Add user',
},
],
},
{
key: keys.VIEW_USR,
path: '/view-user',
// eslint-disable-next-line react/display-name
renderComponent: (crumbs) => <UserDetails crumbItem={crumbs} />,
crumbs: [
{
selected: 'false',
link: `${prefix}/view-user`,
accessibilityText: 'View user',
linkTtile: 'View user',
},
],
},
{
key: keys.USER_GRID,
path: '/user-grid',
// eslint-disable-next-line react/display-name
renderComponent: (crumbs) => <UserGrid crumbItem={crumbs} />,
crumbs: [
{
selected: 'false',
link: `${prefix}/user-grid`,
accessibilityText: 'User grid',
linkTtile: 'User grid',
},
],
},
]
return (
<div className="app-container">
<Switch>
{routes.map(({ key, path, crumbs, renderComponent }) => {
return (
<Route key={key} path={path}>
{renderComponent(crumbs)}
</Route>
)
})}
<Redirect to="/add-user" />
</Switch>
</div>
)
}

Answer 1

您是如何运行应用程序的？如果您正在使用Webpack，您可能需要将historyApiFallback: true添加到开发服务器配置中