如何在react-router中限制对路由的访问？

通常，已登录的用户将被授予令牌，并将该令牌用于与服务器的任何通信。我们通常要做的是定义一个根页面，然后在该页面的顶部进行构建。该根页面为您执行本地化，身份验证和其他配置。

这是一个例子

Routes = (
    <Route path="/" handler={Root}>
        <Route name="login" handler={Login} />
        <Route name="forget" handler={ForgetPassword} />
        <Route handler={Main} >
            <Route name="overview" handler={Overview} />
            <Route name="profile" handler={Profile} />
            <DefaultRoute handler={Overview} />
        </Route>
        <DefaultRoute handler={Login} />
        <NotFoundRoute handler={NotFound} />
    </Route>
);

在您的根页面上，检查令牌是否为null或使用服务器对令牌进行身份验证，以查看用户是否有效登录。

希望这可以帮助 ：）

您可以使用HOC并且auth是一个变量，您可以更改值true或false表示（授权）

<Route path="/login" component={SignIn} />
<Route path="/posts" render = {() => (auth ?  (<Post />) : (<Redirect to="/login" />))}/>

react-router 如果您鼓励路由器采用声明式方法，则应使路由器尽可能地笨拙，并避免将路由逻辑放入组件中。

这是您的操作方法（假设您将loggedIn道具传递给它）：

const DumbRouter = ({ loggedIn }) => (
  <Router history={history}>
    <Switch>
      {[
        !loggedIn && LoggedOutRoutes,
        loggedIn && LoggedInRouter,
        <Route component={404Route} />
      ]}
    </Switch>
  </Router>
);

const LoggedInRoutes = [
  <Route path="/" component={Profile} />
];

const LoggedOutRoutes = [
  <Route path="/" component={Login} />
];