伙计们!
我有一个带有BrowserRouter的反应式网络应用程序但是当我进行页面刷新时,它突然停止在任何地方路由关于代码的重定向 .
主 index.js 代码如下所示:
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
document.getElementById('root')
);
App.js 路由由免费和受保护的路由构成 - 只是我实现用户身份验证的方式:
const freeRoutes = () => (
<Switch> //My login component
<Route path='/' component={Signin} />
<Redirect to='/' />
</Switch>
)
const protectedRoutes = () => (
<Switch> //The other component from which I use the log out function
<Route path='/home' component={Home} />
<Redirect to='/home' />
</Switch>
)
const App = (props) => (
<div>
{ sessionStorage.getItem("token") ? protectedRoutes() : freeRoutes() }
</div>
)
应用程序的Logout功能基于action,它只删除sessionStorage项 .
如何重现问题以及如何知道我的代码应该正常工作?
当我登录并重定向到Home组件,然后单击注销 - 一切正常,我被重定向回Login组件,我可以多次这样做 .
但是,当我登录我的应用程序并在Home组件中刷新页面时 - 重定向不再起作用 . 我已经检查了注销功能是否有效,它确实有效 - 它删除了sessionStorage项,但重定向不起作用,路径仍然停留在 localhost:3000/home 上,直到我再次刷新页面,然后将我转移回登录零件 .
我用:
“反应”:“^ 16.4.0”,
“react-redux”:“^ 5.0.7”,
“react-router-dom”:“^ 4.3.1”
我也尝试将<base href = "/">添加到我的index.html以及将historyApiFallback设置添加到我的webpack.config.dev.js中 .
devServer:{
historyApiFallback:true
}
任何建议,更正和想法将非常感谢!
附:该项目是使用create-react-app制作的
3 回答
如果在部署的网站上使用 生产环境 版本发生问题(而不是在本地服务器中进行测试),问题可能出在您的web.config文件中 . 尝试将以下规则添加到web.config文件中:
所有打开的选项卡都会销毁所有sessionstorage变量(new也是其中的一部分) . 但是,保留了localstorage变量 .
所以发生的事情是当你登录时,你创建了一个会话存储 . 一旦你刷新,它就会破坏会话存储,你仍然试图去
/home
,它会带你到那里 . 你还在/home
.您可以通过两种方式解决问题:
更改为localstorage
在组件中处理这个问题 . 与componetDidmount类似,您可以检查是否有会话,如果没有,则触发重定向 .
似乎问题是由于主要App组件在使用if语句检查路由之前呈现的 .
然后我改变了我如何推送路由的逻辑 - 而不是使用不同的交换机,我只留下一个带有所有路由的交换机 . 在Login和Home组件中,我会进行检查(如果已通过身份验证)并使用history.push()进行重定向 .
因此,问题不在于路由器,而是与流程序列有关 .
谢谢大家的答案 .