Javascript 在react js中浏览页面和处理后退按钮的最佳方式

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>

---

您是否阅读了react-router-v4，其中解释了重定向，并特别强调了身份验证？这是我过去使用过的方法，效果非常好

要点是创建一个

组件，该组件封装了react router的

组件，如果用户试图导航到私有路由而未登录，则基本上将显示

登录

组件。否则，用户将获得他们请求的路由的视图

例如：

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

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

如果您希望登录页是一个受身份验证保护的视图（如指向

ContainerSingleApp

组件的

/main

路由），则仍然不需要将

登录

组件添加为路由。你可以这样做：

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

---

看。至于

注册

组件。。。只要在其中添加逻辑，将重定向到另一个页面的用户，如果已经登录。您可以使用与

privaterout

组件类似的方法。

作为一种简单的方法，您可以使用auth状态。不知怎的，你在登录后更新了你的状态，对吗？因此，只需检查这些组件中的状态，以及是否有auth将用户重定向到您想要的任何位置。谢谢@devserkan，我已经想到了这一点，但问题是如果您要进行注销，您必须检查每个页面，因此我想知道是否存在这方面的最佳实践。非常感谢。如果一个页面需要查找身份验证状态，那么您就无法摆脱此状态。你应该检查一下。通过传递道具或使用Redux等解决方案，但你应该这样做。感谢上帝，我已经准备好在我的应用程序上使用Redux了。所以没有其他技巧可以做到：/！谢谢，如果有，我不知道：）这里有一个非常简单的例子：当你尝试打开/仪表板时，它会再次将你踢到主页。谢谢，我会尝试，但如果用户已登录，然后按“上一步”按钮，这是我的问题，我不想让用户返回登录页面，如果登录页面是登录页面，我会问？？？@G.Adnane一个好问题。我为答案添加了更清晰的内容。@G.Adnane简短的答案是否定的。您永远不需要创建指向

Signin

组件的路由。但是，我们遇到了一个问题，当用户未登录时，我希望他能够在Signin和注册之间导航，也可以从注册页面连接，所以我想我也可以把它包装成一个，请，没有办法动态地改变周二的url，我想在url上显示/sign广告/signup

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

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

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