React Router Wrap несколько маршрутов в перенаправлении

Question

С учетом токена аутентификации и функции checkToken как бы я переадресовал с нескольких маршрутов, используя маршрутизатор реагирования, чтобы предотвратить повторение, как показано ниже?

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

Становится громоздким, если у меня есть пара дюжин маршрутов, чтобы повторить это.

Конечно, должен быть лучший путь!

Answer 1

Вот как мне нравится справляться с этим:

1. Создайте папку routers в src
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);

И, наконец, вотyour 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>