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

Question

同伴们！

我有一个带有BrowserRouter的React Web应用程序，但是当我刷新页面时，它突然停止了路由有关代码重定向的任何地方。

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>
)

可能应用程序的注销功能基于操作，该操作仅删除sessionStorage项目。

如何重现该问题以及如何知道我的代码应该正常工作？

当我登录并重定向到“主页”组件，然后单击“注销”时，一切正常，我被重定向回“登录”组件，并且我可以多次这样做。

但是，当我登录到我的应用程序并在Home组件中时，刷新页面-重定向不再起作用。 我已经检查了登出功能是否正常工作，并且确实工作了-它删除了sessionStorage项，但是重定向不起作用，并且路径一直停留在localhost：3000 / home上，直到我再次刷新页面为止，然后什么转移了我回到登录组件。

我用：

 "react": "^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 } 

任何建议，更正和想法将不胜感激！

PS此项目是使用create-react-app制作的

Answer 1

所有打开的标签页的所有sessionstorage变量都被破坏（新鲜也是其中的一部分）。 但是，保留了本地存储变量。

因此，发生的事情是在您登录时创建了会话存储。 刷新后，它破坏了会话存储，并且您仍在尝试转到/home ，它将带您到那里。 您仍在/home 。

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

1. 更改为本地存储

2. 在组件中注意这一点。 像在componetDidmount中一样，您可以检查是否存在会话，如果没有，则触发重定向。

Answer 2

如果问题出现在您部署的网站上的生产版本中（而不是在本地服务器中进行测试），则问题可能出在您的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>

Answer 3

似乎是造成此问题的原因，因为在使用if语句检查路由之前，主要的App组件正在渲染。

然后，我更改了推路由的逻辑-而不是使用不同的交换机，而是只留下了一个包含所有路由的交换机。 在Login和Home组件内部，我进行检查（如果已通过身份验证），并使用history.push（）进行重定向。

因此，问题出在路由器上，而不是路由器上。

谢谢大家的答案。