如果您使用的是 redux，您可以显示临时的“正在加载...”视图。只有当用户为空并加载时才会重定向路由。

私有路由.js

import React from 'react';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';

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

import { selectors } from 'settings/reducer';

const PrivateRoute = ({ component: Component, ...rest }) => {
  const user = useSelector(state => selectors.user(state));
  const isLoaded = useSelector(state => selectors.isLoaded(state));

  return (
    <Route
      {...rest}
      render={props =>
        !isLoaded ? (
          <></>
        ) : user ? (
          <Component {...props} />
        ) : (
          <Redirect to='/sign_in' />
        )
      }
    />
  );
};

export default PrivateRoute;

PrivateRoute.propTypes = {
  component: PropTypes.any
};

路由.js

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import PrivateRoute from './components/PrivateRoute';

export const Routes = () => (
  <BrowserRouter>
    <Switch>
      <Route exact={true} path='/' component={Home} />
      <PrivateRoute path='/account' component={Account} />
    </Switch>
  </BrowserRouter>
);

在我的情况下，问题是在执行身份验证检查之前，每次刷新私有页面系统将用户重定向到主页后，默认情况下商店中的令牌值为空，因此默认情况下用户未经授权。我通过将默认的 redux 状态令牌值更改为未定义来修复它。“未定义”在我的情况下意味着系统尚未检查用户是否已获得授权。如果用户授权令牌值将是一些字符串，如果未授权 - null，所以 PrivateRoute 组件看起来

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

const PrivateRoute = ({children, token, ...props}) => {
  const renderChildren = () => {
    if (!!token) {// if it's a string - show children
      return children;
    } else if (token === undefined) { // if undefined show nothing, but not redirect
      return null; // no need to show even loader, but if necessary, show it here
    } else { // else if null show redirect
      return (
        <Redirect
          to={{
            pathname: "/",
          }}
        />
      );
    }
  };

  return (
    <Route {...props}>
      {renderChildren()}
    </Route>
  )
};

function mapStateToProps(state) {
  return {
    token: state.auth.token,
  }
}

export default connect(mapStateToProps)(PrivateRoute);

应用程序.js

    <Route path="/" exact component={Home}/>
    <PrivateRoute path="/profile" component={Profile}/>

异步专用路由器react

不知道这是否会有所帮助，但在搜索整个互联网后得出了这个决定：

https://hackernoon.com/react-authentication-in-depth-part-2-bbf90d42efc9

https://github.com/dabit3/react-authentication-in-depth/blob/master/src/Router.js

如果用户没有所需的角色，我的情况是从隐藏页面重定向到主页：

私人路线

import React, { Component } from 'react';
import { Route, Redirect, withRouter } from 'react-router-dom';
import PropTypes from 'prop-types';
import { roleChecker } from '../helpers/formatter';
import { userInfoFetch } from '../api/userInfo';

class PrivateRoute extends Component {
  state = {
    haveAcces: false,
    loaded: false,
  }

  componentDidMount() {
    this.checkAcces();
  }

  checkAcces = () => {
    const { userRole, history } = this.props;
    let { haveAcces } = this.state;

    // your fetch request
    userInfoFetch()
      .then(data => {
        const { userRoles } = data.data;
        haveAcces = roleChecker(userRoles, userRole); // true || false
        this.setState({
          haveAcces,
          loaded: true,
        });
      })
      .catch(() => {
        history.push('/');
      });
  }

  render() {
    const { component: Component, ...rest } = this.props;
    const { loaded, haveAcces } = this.state;
    if (!loaded) return null;
    return (
      <Route
        {...rest}
        render={props => {
          return haveAcces ? (
            <Component {...props} />
          ) : (
            <Redirect
              to={{
                pathname: '/',
              }}
            />
          );
        }}
      />
    );
  }
}

export default withRouter(PrivateRoute);

PrivateRoute.propTypes = {
  userRole: PropTypes.string.isRequired,
};

文章路线

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import PrivateRoute from '../PrivateRoute';

// pages
import Articles from '../../pages/Articles';
import ArticleCreate from '../../pages/ArticleCreate';


const ArticlesRoute = () => {
  return (
    <Switch>
      <PrivateRoute
        exact
        path="/articles"
        userRole="ArticlesEditor"
        component={Articles}
      />
      <Route
        exact
        path="/articles/create"
        component={ArticleCreate}
      />
    </Switch>
  );
};

export default ArticlesRoute;

解决方案是添加第二个标志：gotUnswerFromServer。没有它，组件总是重定向到“/”，而无需等待服务器的回答。

export default class PrivateRoute extends React.Component {
    constructor(props){
      super(props);
      this.state = {
        isLogged: false,
        gotUnswerFromServer: false
      }
    }

    componentDidMount(){
      const session = read_cookie('session');
      fetch(CHECK_TOKEN_API_URL, {
        method: 'post',
        headers: {'Accept': 'application/json', 'Content-Type': 'application/json'},
        body: JSON.stringify({ id: session.id, token: session.token })
      }).then( res => {
        if(res.ok) this.setState({ gotUnswerFromServer: true, isLogged: true })
      })
    }

    render() {
      if( this.state.gotUnswerFromServer ){
        if( this.state.isLogged ) return <Route path={this.props.path} component={this.props.component}/>
        else return <Redirect to={{pathname: '/', state: { from: this.props.location }}} />
      } else return null
    }
}