React-Router不会在重定向时更新URL

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

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

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 />将用户重定向到新的URL。

您可以使用此示例代码实现所需的行为。

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

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

Answer 3

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