React Router 4 阻止页面重新加载

Question

这是我的路由器结构：

<Router>
    <div>
        <Route path="/" exact component={ Login } />
        <Route path="/timeline" component={ requireAuth(Timeline) } />
        <Route path="/chat/:id" component={ requireAuth(Chat) }/>
    </div>
</Router>

requireAuth() 是一个简单的 HOC 组件，它进行 API 调用并根据响应呈现 <ComposedComponent {...this.props} /> 或 <Redirect to="/" />

我面临两个问题：

requireAuth()
当我从 /timeline 转到 /chat/xxx 时，浏览器会重新加载页面。

我该如何解决这个问题？我想我应该以某种方式包装需要身份验证的路由？...

更新

所以我花了一些时间想出了这个逻辑：

ReactDOM.render((

    <div>
        <Router>
            <Switch>
                <Route exact path="/" component={Login} />
                <App>
                    <Route path="/timeline" component={Timeline} />
                    <Route path="/chat/:id" component={Chat} />
                </App>
            </Switch>
        </Router>
    </div>


), document.getElementById('root'))

我的授权逻辑现在位于 App.js 中，当我尝试打开 <App></App> 部分内的任何路由时仅被调用一次。

Answer 1

我不会保护您的客户端组件，而是通过相同的 HOC 保护入口点并找到另一种方法来保护您的应用程序的内部工作。绕过客户端限制来访问受保护的组件非常容易，因此您只能为此做这么多保护。

解决此问题的最流行方法是使用令牌保护任何用于向后端提交数据的请求，在成功提交任何数据之前必须验证该令牌。

React Router 4 阻止页面重新加载

React Router 4 prevent pages from reloading

reactjs

react-router

react-router-v4