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()是一个简单的高阶组件，它会进行API调用并基于响应渲染<ComposedComponent {...this.props} />或<Redirect to="/" />

我面临两个问题:

1. 每当我从/timeline到/chat/XXX时，都会调用requireAuth()
2. 当我从/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>部分内的任何路由时调用一次。

- luiquao

---

你的意思是屏幕闪烁，重新加载是什么意思？它真的会重新加载吗？ - Win

嗯，我想问题本身就有问题。我的实际问题是每次从一个路由跳转到另一个路由时都会触发requireAuth()。 - luiquao

是的，因为你将它包装在一个高阶组件中。这将每次都触发，无论它之前是否已执行，因为它必须传递以渲染子组件。 - Win

我现在看到了，这很明显。有没有办法将需要身份验证的路由组合起来？ - luiquao

我已经在下面发布了一个答案 :) - Win

Answer 1

与其保护客户端组件，我建议只通过同一高阶组件来保护入口，并找到另一种方法来保护应用程序的内部工作原理。很容易绕过客户端限制以访问受保护的组件，因此您只能从这一端进行有限的保护。

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

- Win

---

又花了一个小时左右，得出了以下代码：<Route exact path="/" component={Login} /> <App> <Route path="/timeline" component={Timeline} /> <Route path="/chat/:id" component={Chat} /> </App> 我将我的身份验证逻辑放在了 App 中，这样它只会被调用一次，并且作为入口点。 - luiquao

@mikek 太好了！听到这个消息很高兴 :) - Win