React-路由架构-Route中的render 不显示页面的问题

使用 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" />
      );
    }}
  />