Question

我有一个使用react-router-v4的应用。我有一个匹配页面，除非您登录，否则无法访问。当用户未登录并尝试转到/match时，他们将被重定向到/login。我的问题是，当用户重定向到/login时，URL保持为/ match。这在我的代码中的其他地方引起了问题。当用户重定向到/login时，如何让React-Router更新URL？我正在从App.js内的开关重定向页面。这是我的代码的示例：

<Route
    path='/match'
    component= {
        () => {
            if (this.state.auth) return <HomePage />;
            else return <LoginPage />;
        }
    }
/>

TL; DR

如果尝试访问/login时用户未登录，如何获取URL更改为/match。

Answer 1

您可以为/login设置一条单独的路由，如果用户未登录，请在/match路由上使用Redirect组件。

<Route
  path='/match'
  render={
    () => {
      if (this.state.auth) return <HomePage />;
      else return <Redirect to='/login'/>;
    }
  }
/>
<Route
  path='/login'
  render={LoginPage}
/>

Answer 2

您可能对React Router的工作原理有些不了解。在您的示例中，React Router可以正常工作，因为您只是在渲染组件。

您应该使用React Router的<Redirect />-组件将用户重定向到新的网址。

通过此示例代码，您可以实现所需的行为。

<Route
  path='/match'
  render={
    () => {
      if(this.state.auth){ return <HomePage /> }
      else { return <Redirect to="/login" /> }
    }
  }
/>
<Route match="login" component={Login} />

您还可以使用组件内部的React Router提供的道具props.history.push('/login')以编程方式在组件内部实现相同的行为。

Answer 3

重定向逻辑应该是组件本身的一部分，而不是路由配置。为了使其可重用，请使用重定向逻辑创建HOC，然后仅包装应在路由配置中保护的路径。

React-Router在重定向时未更新URL

3 个答案: