使用 react-router-dom 的版本是 5.3.0
整体路由架构这里不详细说明,仅针对路由配置中关于 Route 的 render 的使用进行分析。
页面实现效果
当本地存储中没有 token 授权,重定向到 login 页面,否则进入 Sandbox 页面
错误使用
export default function IndexRouter() {
return (
<HashRouter>
<Switch>
<Route path="/login" component={Login} />
{/* render 方法跳转组件,可以实现当未授权重定向到指定组件 */}
{/* 通常,登录成功后,会将后端返回的 token 字段加到本地存储中,所以可以判断本地中有没有这个字段来判断是否授权(登陆过) */}
<Route
path="/"
render={() => {
localStorage.getItem("token") ? (
<Sandbox />
) : (
<Redirect to="/login" />
);
}}
/>
</Switch>
</HashRouter>
);
}
运行效果
无法重定向到 /login,/ 路径也无法显示 sa
原因分析
render 是一个方法,以上代码并没有返回值,
解决
方法一: 去掉 {}
<Route
path="/"
render={() =>
localStorage.getItem("token") ? (
<Sandbox />
) : (
<Redirect to="/login" />
)
}
/>
方法二: 将组件 return 出去
<Route
path="/"
render={() => {
return localStorage.getItem("token") ? (
<Sandbox />
) : (
<Redirect to="/login" />
);
}}
/>