Question

其他程序员！

我有一个带有BrowserRouter的反应网络应用程序，但是当我进行页面刷新时，它会突然停止任何关于代码重定向的路由。

主 index.js 代码如下所示：

  var inputString = "Today is very bright day"

        let file  = ["Birthday":["brand day", "burn day", "bright day", "brick daya"],"Temporary": ["tempora", "temporar", "tempura"]]

        file.forEach { (key,value) in
            value.forEach({ (item) in
               inputString =  inputString.replacingOccurrences(of: item, with: key)
            })
        }

        print(inputString)

App.js 路由是由免费路径和受保护路由构成的 - 只是我实现用户身份验证的方式：

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

May app的注销功能基于动作，它只是删除了sessionStorage项目。

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

当我登录并重定向到Home组件然后单击logout时 - 一切正常，我被重定向回Login组件，我可以多次这样做。

然而，当我登录我的应用程序并在Home组件中刷新页面时 - 重定向不再起作用。我已检查注销功能是否有效，它确实有效 - 它会删除sessionStorage项，但重定向不起作用，路径仍然停留在 localhost：3000 / home 上，直到我再次刷新页面，然后将我转移回Login组件。

我用：

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

我还试过添加＆lt; base href =＆＃34; /＆＃34;＆gt; 进入我的 index.html 以及historyApiFallback进入我的webpack.config.dev.js。

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

非常感谢任何建议，更正和想法！

P.S。该项目是使用create-react-app

制作的

Answer 1

所有打开的选项卡都会销毁所有sessionstorage变量（new也是其中的一部分）。但是，保留了localstorage变量。

所以当您登录时，您创建了会话存储。刷新后，它会破坏会话存储，您仍然会尝试转到/home，这会将您带到那里。你还在/home。

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

更改为localstorage
在组件中处理此问题。就像在componetDidmount中一样，你可以检查是否有会话，如果没有，则触发重定向。

Answer 2

如果您在部署的网站上使用生产版本（而不是在本地服务器上进行测试）时出现问题，则问题可能出在您的web.config文件中。尝试将以下规则添加到web.config文件中：

ALTER TABLE items ADD COLUMN date DATETIME NOT NULL DEFAULT '2018-06-14 22:00:00';

Answer 3

似乎是由于该主要App组件在使用if语句检查路由之前正在渲染而引起的。

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

因此，问题不在于路由器，而是毕竟是进程顺序。

谢谢大家的回答。

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

3 个答案: