Reactjs 如何限制用户登录时使用登录页面

我有一个react应用程序，我想让我的路线私有化，比如当用户未登录时，他们无法看到其他页面，反之亦然

第一个是正常工作时，我没有登录我重定向到登录页面，即“/”这条路线

但当我登录并转到这个“/”url时，我就可以转到登录了

“/”这是我的登录页面

我的代码

  export const  AuthRoute=({component:Component, ...rest}) => {
  const token = localStorage.getItem('JWT_Token') 
    console.log(token)
    return (
       <Route {...rest} render={
         (props => {
           if(token)
           {

             return <Component {...props}/>
           }
           else{
             return <Redirect to={{
               pathname:"/",
               state:{
                 from:props.location
               }
             }} />
           }
         })
       }/>
    )
}

export const AuthRoute=（{component:component，…rest}）=>{
const-token=localStorage.getItem（'JWT\u-token'）
console.log（令牌）
返回(
{
如果（令牌）
{
返回
}
否则{
返回
}
})
}/>
)
}

我的路线文件

    <Switch>
    <Route exact path="/" component={ login } />          
    <AuthRoute  path="/welcome" component={ welcome } /> 
    <AuthRoute  path="/profile" component={ profile } />
    </Switch>

我正在使用本地存储检查用户

注销时，我将删除令牌，因此如果没有令牌，我将注销用户

---

不知道我做错了什么。

您可以在路由上编写一个小包装，以便登录组件在登录时重定向到/welcome

export const LoginRoute=({component:Component, ...rest}) => {
  const token = localStorage.getItem('JWT_Token') 

    return (
       <Route {...rest} render={
         (props => {
           if(token)
           {

             return <Redirect to="/welcome"/>
           }
           else{
             return <Component {...props}/>
           }
         })
       }/>
    );
}

...
<LoginRoute exact path="/" component={ login } />

export const LoginRoute=（{component:component，…rest}）=>{
const-token=localStorage.getItem（'JWT\u-token'）
返回(
{
如果（令牌）
{
返回
}
否则{
返回
}
})
}/>
);
}
...

你是说要像我之前对其他路由所做的那样，为登录验证再创建一个组件？是的，这是正确的。或者您可以在登录组件内部实现这个逻辑，那么这是正确的方法吗？因为我是新手，所以我要问，因为我在Vue上工作过，我们有了路由器，然后才有了这些东西