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

Question

Hiii，我的问题是，假设我有一个登录页面，用户可以在登录页面和注册页面之间切换，但我想要的是，当用户登录或在注册页面中创建新帐户时，所有历史记录都将被删除。或者，如果这是不可能的，什么是最好的方法来处理这些情况，以避免用户已经登录，然后当他点击后退按钮时，他将发现自己再次在两个页面之一(登录或注销)。我当前使用的是React路由器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组件。否则，将为用户提供他们所请求的路由的视图。

例如：

<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 }
            }}
          />
        )
      }
    />
  );
}

要解决用户按下back按钮的问题，可以用Login组件替换PrivateRoute组件中的重定向。这样，您实际上不会重定向到指向您的Login的路由，而只是呈现Login，而不是用户试图访问的私有组件。一旦用户登录，它将呈现他们试图查看的组件。因为这种方法不需要/login路由，所以您不需要担心用户浏览回登录页面，除非他们实际上没有登录。请参阅以下代码中的更改：

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

上面第一个编码示例中的路由演示了一种设置，其中登录页面不受身份验证保护。

如果您希望您的登录页面是一个受身份验证保护的视图(就像指向ContainerSingleApp组件的/main路由)，那么您仍然不需要将Login组件添加为路由。你可以这样做：

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

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

值得注意的是，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组件类似的方法。