Reactjs 用户未登录时重定向

我在App.js中有以下路线

---

对于某些路由，我只想在用户登录时显示它们。使用React的最佳方法是什么？

假设您在某处有某种

isLoggedIn

变量。您可以通过以下方式来实现：

<Router>
                <div className="App">
                    <Layout>
                        <Route exact path="/" exact component={Main}/>
                        <Route exact path="/passwordchange/:email" component={PasswordChange}/>
                        <Route exact path="/account" component={Account}/>
                        <Route exact path="/forgot-password" component={ForgotPassword}/>
                        <Route exact path="/login" component={Login}/>
                        <Route exact path="/faq" component={FAQ}/>
                        <Route exact path="/library" component={Library}/>
                        <Route exact path="/signup" component={SignUp}/>
                        <Route exact path="/signup/:id" component={SignUp}/>
                        <Route exact path="/login/:id" component={Login}/>
                        <Route path="/books" exact component={BookSummaries}/>
                        { isLoggedIn &&
                        <>
                          <Route path="/home" exact component={Main}/>
                          <Route path="/pricing" exact component={Pricing}/>
                          <Route path="/books/:id" exact component={BookDetail}/>
                          <Route path="/categories/:id" exact component={Categories}/>
                          <Route path="/category/:category" exact component={BookListPage}/>
                          <Route path="/stacksocial" exact component={StackSocial}/>
                          <Route path="/booklist/:sort" exact component={BookListPage}/>
                          <Route path="/reader/:id" exact component={Reader}/>
                          <Route path="/search" exact component={BookSearch}/>
                          <Route path="/payment/:planid" exact component={Payment}/>
                        </>
                      }
                    </Layout>
                </div>
            </Router>

{伊斯洛格丁&&
}

最好的方法是创建一个

ProtectedRoute

组件。如果用户未登录，请将其重定向到其他位置，如登录页面

这里是ProtectedRoute.js（这里我有一个

authService

来决定用户是否登录；您的可能不同）

从“React”导入React；
从“react router dom”导入{Route，Redirect}；
从“../../services/auth service”导入authService；
导出常量ProtectedRoute=({
路径
组件：组件，
提供，
休息
}) => {
返回(
{
如果（authService.isAuthenticated（））{
返回组件？：渲染（道具）；
}否则{
返回；
}
}}
/>
);
};
导出默认的ProtectedRoute；

这样，您就可以将此组件用于需要身份验证的路由

<Router>
  <div className="App">
    <Layout>
      <Route exact path="/" exact component={Main} />
      <ProtectedRoute exact path="/passwordchange/:email" component={PasswordChange} />
    </Layout>
  </div>

---

您使用什么来确定用户是否已登录？你有一些本地排序或redux状态吗？这是吗？您是否查看了？如果用户未登录，我如何重定向用户？我要做的是在定义路由后在其中一个叶组件中返回一个

组件。

<Router>
  <div className="App">
    <Layout>
      <Route exact path="/" exact component={Main} />
      <ProtectedRoute exact path="/passwordchange/:email" component={PasswordChange} />
    </Layout>
  </div>