javascript - 在 React js 中在页面之间导航和处理后退按钮的最佳方式

Question

您好，我的问题是，假设我有一个登录页面，用户可以在登录页面和注册页面之间切换，但我想要的是，当用户登录或在注册页面中创建新帐户时，所有历史记录都将被删除。或者，如果不可能，那么处理这些情况的最佳方法是什么，以避免用户登录后单击后退按钮时，他会再次出现在两个页面之一(登录或注销)中。我目前正在使用 React Router v4。如果有人可以帮助我并为此提供最佳实践，那就太好了。谢谢。

<BrowserRouter>
        <Switch>
          <Route path="/" component={SignIn} exact />
          <Route path="/signup" component={SignUp} />
          <Route path="/main" component={ContainerSingleApp} />
          <Route component={Error} />
        </Switch>
</BrowserRouter>

Answer 1

你读过react-router-v4 documentation吗？这解释了特别强调身份验证的重定向？这是我过去使用的方法，效果非常好。

要点是您创建一个 <PrivateRoute />包装 react-router 的组件 <Route />组件，基本上会显示 Login如果用户尝试在未登录的情况下导航到私有(private)路线，则组件。否则，将为用户提供他们请求的路线的 View 。

例如:

<BrowserRouter>
    <Switch>
        <Route path="/" component={LandingPage} />
        <PrivateRoute path="/main" component={ContainerSingleApp} />
        <Route component={Error} />
    </Switch>
</BrowserRouter>

来自文档:

function PrivateRoute({ component: Component, ...rest }) {
  return (
    <Route
      {...rest}
      render={props =>
        fakeAuth.isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: props.location }
            }}
          />
        )
      }
    />
  );
}

要解决让用户按下后退按钮的问题，您可以换掉 PrivateRoute 中的重定向组件与您的 Login成分。这样，您实际上并没有重定向到指向您的登录名的路由，您只是简单地呈现登录名来代替用户尝试访问的私有(private)组件。用户登录后，它将呈现他们试图查看的组件。因为没有 /login此方法所需的路由，您无需担心用户浏览回登录页面，除非他们实际上没有登录。请参阅以下代码中的更改:

function PrivateRoute({ component: Component, ...rest }) {
  return (
    <Route
      {...rest}
      render={props =>
        fakeAuth.isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Login />
        )
      }
    />
  );
}

上面第一个编码示例中的路由演示了着陆页不受身份验证保护的设置。

如果您希望您的着陆页是一个受身份验证保护的 View (例如您的 /main 路由指向 ContainerSingleApp 组件)，那么您仍然不需要添加 Login组件作为路由。你可以这样做:

<BrowserRouter>
    <Switch>
        <PrivateRoute path="/" component={ContainerSingleApp} />
        <Route component={Error} />
    </Switch>
</BrowserRouter>

请记住，在 PrivateRoute组件，如果用户未登录，它将自动显示登录 View 。如果用户登录，它将呈现传入的组件。

重要的是要注意 url 永远不会显示类似 https://your-site.com/login 的内容.它将始终显示用户尝试访问的组件的路由。不同之处在于它呈现的组件将取决于用户是否经过身份验证... Login如果没有组件，则为 ContainerSingleApp组件(或路由指向的任何组件)如果已登录。

如果您仍想创建到登录页面的路由，您可以使用重定向:

<BrowserRouter>
    <Switch>
        <PrivateRoute path="/" component={ContainerSingleApp} />
        <Route path="/signin" component={() => <Redirect to="/"/>}
        <Route path="/signup" component={Signup} />
        <Route component={Error} />
    </Switch>
</BrowserRouter>

参见 redirect documentation .至于Signup组件...只需在其中添加逻辑即可将用户重定向到另一个页面(如果已登录)。您可以使用与 PrivateRoute 中使用的类似方法。组件。