javascript - 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

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

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

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

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

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