首页 文章

页面刷新后React Router无法正常工作

提问于
浏览
0

伙计们!

我有一个带有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 回答

  • 0

    如果在部署的网站上使用 生产环境 版本发生问题(而不是在本地服务器中进行测试),问题可能出在您的web.config文件中 . 尝试将以下规则添加到web.config文件中:

    <rule name="Rewrite Text Requests" stopProcessing="true">
              <match url=".*" />
              <conditions>
                <add input="{HTTP_METHOD}" pattern="^GET$" />
                <add input="{HTTP_ACCEPT}" pattern="^text/html" />
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
              </conditions>
              <action type="Rewrite" url="/index.html" />
            </rule>
    
  • 0

    所有打开的选项卡都会销毁所有sessionstorage变量(new也是其中的一部分) . 但是,保留了localstorage变量 .

    所以发生的事情是当你登录时,你创建了一个会话存储 . 一旦你刷新,它就会破坏会话存储,你仍然试图去 /home ,它会带你到那里 . 你还在 /home .

    您可以通过两种方式解决问题:

    • 更改为localstorage

    • 在组件中处理这个问题 . 与componetDidmount类似,您可以检查是否有会话,如果没有,则触发重定向 .

  • 0

    似乎问题是由于主要App组件在使用if语句检查路由之前呈现的 .

    然后我改变了我如何推送路由的逻辑 - 而不是使用不同的交换机,我只留下一个带有所有路由的交换机 . 在Login和Home组件中,我会进行检查(如果已通过身份验证)并使用history.push()进行重定向 .

    因此,问题不在于路由器,而是与流程序列有关 .

    谢谢大家的答案 .

相关问题