Javascript 受限导航-专用和公用路由

我需要做一个路由器系统来区分认证用户和非认证用户

我想要实现的是，经过授权的用户可以看到他们的仪表板和个人详细信息，而未经授权的用户只能看到登录页、登录表单和注册表单

我目前有上下文管理，所以我知道用户是否登录。我只需要弄清楚所有重定向和路由相关的事情

我的代码制造了各种各样的“奇怪”的东西。我真的不知道我把事情搞砸了

AppContent.js 这就是所有路由发生的地方。

AppLayout

只是一个布局包装器，其页眉和页脚必须只有在登录时才可见

const-AppContent=（）=>(
（登录页）}path='/'精确/>
（注册页）}path='/Register'exact/>
（未找到）}path='*'/>
（未找到）}path='*'/>
);

PublicRoute.js

constpublicRoute=（{component:component，…rest}）=>{
const{user，isLoading}=useContext（AuthContext）；
如果（孤岛加载）{
返回(
加载。。。
);
}
返回(
（用户？：）}/>
);
};

privaterout.js

const PrivateRoute=（{component:component，…rest}）=>{
const{user，isLoading}=useContext（AuthContext）；
如果（孤岛加载）{
返回(
加载。。。
);
}
返回(
（用户(
) : )}
/>
);
};

AuthStore.js 这是我管理auth上下文的地方

const AuthStore=（{children}）=>{
const[token，setToken]=useState（）；
const[user，setUser]=useState（）；
const[isLoading，setIsLoading]=useState（false）；
const setUserToken=async（userToken）=>{
setItem（'token'，userToken）；
setToken（userToken）；
试一试{
const decodedToken=jwtDecode（userToken）；
const currentUserData=await AuthService.getUserData（decodedToken.username）；
setUser（currentUserData）；
}捕获（错误）{
console.log（error.name）；
}
};
useffect（（）=>{
设置加载（真）；
const localToken=localStorage.getItem（'token'）；
if（localToken）{
setUserToken（localToken）；
}
设置加载（假）；
}, []);
返回(
{儿童}
);
};

非常感谢你

编辑 我真正想要的是： 未经授权时：

• 搜索

  /dashboard

  时，重定向到

  /login

  ✅
• 搜索不存在的路由时，重定向到

  /login

  ✅
• 搜索其他未经授权的路由（如

  /register

  ）时，请重定向到该路由✅

获授权时：

• 搜索

  /login

  时，重定向到

  /dashboard

  ✅
• 搜索不存在的路由时，重定向到404页面，最好是最后两个路由中的一个，看起来像

  （未找到）}path='*'

  ✅
• 搜索另一个授权路由（如

  /profile

  ）时，请重定向到该路由❌ ➡️ 它当前正在重新加载路由，显示登录页面，半秒钟后显示

  /dashboard

  ，但不显示

  /profile

根据文档，

组件的直接子组件只能是react路由器dom包中的

或

组件

All children of a <Switch> should be <Route> or <Redirect> elements. Only the first child to match the current location will be rendered.

---

你能描述一下正在发生的奇怪的事情吗？另外，我不是100%确定，但我不认为switch会与非路由或重定向的直接子级一起工作，你能移除布局组件并查看它是否已修复吗？我已经完成了这项工作，现在它可以工作了，它修复了一个错误，该错误包括在未经授权的情况下浏览不存在的路由时重定向到私有路由，而不是重定向到404路由。但是，现在当我获得授权时，如果我搜索/demo，它会将我重定向到/dashboard。未经授权时不会发生这种情况，如果我搜索/注册它，它会很好地重定向我。这部分是由最后两个路由造成的，即“未找到”路由，如果我更改它们的顺序，则应用程序会以不同的方式运行。现在我想实现以下目标：-未经授权时：[搜索/仪表板时，重定向到/登录]，[搜索不存在的路由时，重定向到/登录]，[搜索另一个未经授权的路由时，重定向到它罚款]/-授权时：[搜索/登录时，重定向到/仪表板]，[搜索不存在的路由时，重定向到PrivateRoute路径='*']，[搜索其他授权路由时，重定向到它]。请编辑您的问题，精确描述正在发生的事情以及您希望发生的事情。我已经添加了一个要求我的路由完全正常的列表，并使用您之前告诉我的关于“搜索路由”的修复程序编辑了de JavaScript。当您说“搜索路由”时，您的意思是在地址栏中输入路径，然后按enter键应用程序重新加载？

const routes = [{ name: 'home', path: '/', exact: true, isProtected: false, component: Home }, { name: 'protected', path: '/dashboard', exact: true, isProtected: true, component: Dashboard }];

const AuthRoute = ({ name, path, exact, isProtected, component: Component }) => {
    const { user } = useContext(userContext);
    if (isProtected && !user) { // redirect to login }
    if (!isProtected || (isProtected && user)) { // render route with props }

}

///...

<Switch>
   {routes.map(route => <AuthRoute {...route} />
</Switch>