将默认路由反转为私有路由，反之

Question

在我的应用中，只有授权后才能进入主页面，分别，如果用户未授权，登录页面总是第一个，如果用户未授权，我有私人路由，不允许，和登录页面的一条正常路线，因为会有很多私人路线，我想做一些事情，比如相反，即我会使用一次私人路线，然后在其他需要授权的页面上使用，放个普通路由，这个怎么实现？

const PrivateRoute = ({store, component: Component, ...rest}) => {
  return (
     <Route
       {...rest}
       render={(props)=>
        localStorage.getItem("token") ? (
           <Component {...props} />
        ) : (
           <Redirect
              to={{
                pathname: "/login",
                state: { from: props.location },
              }}
            />
         )
       }
    />
 )

 export const Routes = () => {
    return (
       <Switch>
          <Route exact path="/" component={Login} />
          <PrivateRoute path="/homepage" component={Homepage} />
          {/* ...more PrivateRoutes */}
       </Switch>
      );
   };

我需要这样的东西

<PrivateRoute exact path="/" component={Login} />
<Route path="/homepage" component={Homepage} />
{/* ...more Routes*/}```

Answer 1

看起来您的主要目标是减少 PrivateRouter 变量的使用，因此您可以尝试这种方法：对已登录/未登录用户使用不同的路由

const App = () => {
  const [loggedIn, setLoggedIn] = useState(false);

  useEffect(() => {
    // check if user is logged in
  }, []);

  return (
    <Switch>
      {!isLoggedIn ? (
        <>
          <Route exact path="/" component={Login} />
        </>
      ) : (
        <>{/* Routes for logged user*/}</>
      )}
    </Switch>
  );
};
``

将默认路由反转为私有路由，反之

Reverse default Route to private Route and conversely

reactjs

mobx

react-router-dom