React路由器在重定向中包装多条路由

Question

给定一个身份验证令牌和一个功能checkToken我将如何使用react路由器从多个路由重新路由以防止重复如下所示？

<Route exact path="/" render={() => {
  return checkToken() ? (<Dashboard />) : (<Redirect to="/login" />)
}} />
<Route exact path="/about" render={() => {
  return checkToken() ? (<About />) : (<Redirect to="/login" />)
}} />

如果我有几十条路线来重复此操作，将变得很麻烦。

当然，必须有更好的方法！

Answer 1

这是我喜欢的处理方式：

1. 在src创建一个routers文件夹
2. 在路由器文件夹内，创建3个文件AppRouter.js ， PrivateRoute.js和PublicRoute.js

这是您的PublicRoute.js ：

import React from 'react';
import { connect } from 'react-redux';
import { Route, Redirect } from 'react-router-dom';

export const PublicRoute = ({ isAuthenticated, component: Component, ...rest }) => (
    <Route {...rest} component={(props) => (
      isAuthenticated ? <Redirect to="/dashboard" /> : <Component {...props} /> 
    )} />
  );

const mapStateToProps = state => ({
  isAuthenticated: // however you need to keep track of that...
});

export default connect(mapStateToProps)(PublicRoute);

这是您的PrivateRoute.js ：

import React from 'react';
import { connect } from 'react-redux';
import { Route, Redirect } from 'react-router-dom';

export const PrivateRoute = ({ isAuthenticated, component: Component, ...rest }) => (
    <Route {...rest} component={(props) => (
      isAuthenticated ? <Component {...props} /> : <Redirect to="/" />
    )} />
  );

const mapStateToProps = state => ({
  isAuthenticated: // however you need to keep track of that...
});

export default connect(mapStateToProps)(PrivateRoute);

最后是您的AppRouter.js ：

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

import Dashboard from '../components/Dashboard';
import NotFound from '../components/NotFound';
import Login from '../components/Login';
import PrivateRoute from './PrivateRoute';
import PublicRoute from './PublicRoute';



const AppRouter = () => (
  <BrowserRouter>
      <Switch>
        {/* use PublicRoute for public routes */}
        <PublicRoute exact path="/" component={Login} />
        {/* use PrivateRoute for private routes */}
        <PrivateRoute path="/dashboard" component={Dashboard} />
        <Route component={NotFound} />
      </Switch>
  </BrowserRouter>
);

export default AppRouter;

有关HOC（高阶组件）的更多信息，请查找文档： https : //reactjs.org/docs/higher-order-components.html

Answer 2

一种实现方法是将checkToken函数放置在componentDidMount内，以便每次安装该组件时始终检查用户是否通过身份验证。

之后，您可以执行以下操作：

let routes = (
  <Switch>
    <Route path="/login" component={LoginComponent} />
    <Redirect to="/" />
  </Switch>
);
if (isAuth) {
  routes = (
    <Switch>
      <Route path="/yourRoute" component={YourComponent} />
      <Redirect to="/" />
    </Switch>
  );
}

return (
  <div>
    {routes}
  </div>