代码之家 › 专栏 › 技术社区 › zilijonas

页面刷新后响应路由器不工作

react-router redux reactjs javascript

zilijonas · 技术社区 · 6 年前

各位编码员!

我有一个带有浏览器路由器的React Web应用程序,但是当我刷新页面时,它会突然停止从代码重定向到任何地方的路由。

主 索引.js 代码如下:

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

这个 应用程序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>
)

May应用程序的注销功能基于操作,它只删除sessionstorage项。

我如何重现这个问题,以及如何知道我的代码应该工作?

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

但是,当我登录到我的应用程序并且在主组件中时,刷新页面-重定向不再有效。我已经检查了注销函数是否工作,它确实工作了——它删除了sessionstorage项,但是重定向不工作,路径保持不变。 本地主机:3000/家 直到我再次刷新页面,然后什么将我传输回登录组件。

我使用:

"react": "^16.4.0",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1"

我也尝试过添加 <base href=“/”> 进入我的 index.html文件 以及我的webpack.config.dev.js中的HistoryApiFallback设置。

 devServer: {
    historyApiFallback: true
 }

任何建议、更正和想法都将非常感谢!

P.S.此项目是使用Create React应用程序创建的

3 回复 | 直到 6 年前

leogoesger 6 年前

所有打开的选项卡的sessionstorage变量都将被销毁(fresh也是其中的一部分)。但是,本地存储变量是保留的。

所以,当您登录时,您创建了一个会话存储。刷新后,它会破坏会话存储,您仍在尝试转到 /home 把你带到那里。你还在 /主页 .

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

更改为本地存储
在组件中注意这一点。与componentIDmount类似,您可以检查是否有会话,如果没有,则触发重定向。

Ryan 6 年前

如果问题发生在部署的网站上的生产构建上(而不是在本地服务器中测试),则问题可能出现在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>

zilijonas 6 年前

似乎是由于主应用程序组件在用if语句检查路由之前呈现而导致的。

然后我改变了我如何推送路线的逻辑——我没有使用不同的开关,只留下一个开关和所有的路线。在登录和家庭组件中,我进行检查(如果经过身份验证),并使用history.push()进行重定向。

因此,问题不在于路由器,而在于进程顺序。

谢谢大家的回答。