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 documentation，其中解释了特别强调auth的重定向？那是我过去使用的方法，而且效果很好。

要点是，您创建了一个<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的路由，而只是呈现了Login来代替用户尝试访问的私有组件。用户登录后，它将呈现他们尝试查看的组件。由于此方法不需要/login路由，因此您无需担心用户浏览返回登录页面，除非他们实际上尚未登录。请参阅下面的代码中的更改：

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

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

如果您希望目标网页是受身份验证保护的视图（例如指向/main组件的ContainerSingleApp路由），则仍然不需要添加{{ 1}}组件作为路线。您可以执行以下操作：

Login

请记住，在<BrowserRouter> <Switch> <PrivateRoute path="/" component={ContainerSingleApp} /> <Route component={Error} /> </Switch> </BrowserRouter>组件中，如果用户未登录，它将自动显示登录视图。如果是，则将呈现传入的组件。

请务必注意，该网址永远不会显示类似PrivateRoute之类的内容。它将始终显示用户尝试访问的组件的路由。不同之处在于其呈现的组件将取决于用户是否通过身份验证... https://your-site.com/login组件（如果未通过身份验证）和Login组件（或路由指向的任何组件）如果已登录

如果您仍要创建登录页面的路由，则可以使用重定向：

ContainerSingleApp

请参见redirect documentation。至于<BrowserRouter> <Switch> <PrivateRoute path="/" component={ContainerSingleApp} /> <Route path="/signin" component={() => <Redirect to="/"/>} <Route path="/signup" component={Signup} /> <Route component={Error} /> </Switch> </BrowserRouter>组件...只需在其中添加逻辑即可将用户重定向到另一个页面（如果已登录）。您可以使用与Signup组件类似的方法。

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

1 个答案: