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

Question

Hiii，我的问题是，假设我有一个登录页面，用户可以在登录和注册页面之间切换，但我想要的是，当用户登录或在注册页面中创建新帐户时，所有的历史将被删除。 或者，如果不可能，处理这些情况的最佳方法是什么，以避免用户登录，然后当他单击后退按钮时，他会再次发现自己位于两个页面之一（登录或注销）。 我目前正在使用 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 文档？ 这是我过去使用过的方法，效果非常好。

要点是您创建了一个<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 }
            }}
          />
        )
      }
    />
  );
}

要解决让用户按下后退按钮的问题，您可以将PrivateRoute组件中的重定向替换为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组件，如果已Login则为ContainerSingleApp组件（或路由指向的任何组件）。

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

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

请参阅重定向文档。 至于Signup组件...只需在其中添加逻辑，如果已经登录，则将用户重定向到另一个页面。您可以使用与PrivateRoute组件一起使用的类似方法。