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

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

Answer 2

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

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

Answer 3

您可能对 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') 以编程方式在组件内实现相同类型的行为。

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

React-Router not updating URL on redirect

javascript

reactjs

react-router

react-router-v4

react-router-dom