与其他答案类似,但是IMO稍微简单一些。
虽然您可以只定义一条平面的路由列表,有些可以守卫,有些则可以,但是您可以创建“围墙的守卫”(请参阅我在此处所做的工作)。
修改,GuardedRoute
以有条件地渲染Route
或Redirect
,使所有其他道具通过。
const GuardedRoute = ({ auth, ...rest }) => {
return auth ? <Route {...rest} /> : <Redirect to="/" />;
};
然后只需在路由器中创建一个“受保护的”部分即可。请记住,Switch
组件中路由的顺序很重要,因此请在*较少特定路径之前对更特定的路径进行排序。
<Switch>
<Route exact path="/" component={Home} />
<GuardedRoute path="/protected" auth={isAutheticated}>
<Switch>
<Route path="/protected/gg" component={GG} />
<Route path="/protected" component={Protected} />
</Switch>
</GuardedRoute>
<Route path="/unprotected" component={Unprotected} />
</Switch>
我通常使用codesandbox,但请让我知道该分叉的stackblitz是否无法加载。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句