如何使用带有私有路由的react-router-dom避免刷新页面时出现分页？

Question

我在React Router路由上遇到问题。当我单击组件时，它将带我到正确的路线并渲染正确的组件。但是，每当刷新页面时，页面都会破裂，并且页面上没有任何显示

index.js（容器）

import React from 'react';
import { Switch } from 'react-router-dom';
import RouteWithSubRoutes from '../../utils/Auth/RouteWithSubRoutes';
import routes from '../../routes';
export default function App() {
  return (
    <div>
      <Switch>
        {routes.map(route => (
          <RouteWithSubRoutes
            key={route.path}
            {...route}
            routes={route.routes}
          />
        ))}
      </Switch>
      <GlobalStyle />
    </div>
  );
}
App.propTypes = {
};

RouteWithSubRoutes.js（组件）

import React from 'react';
import { Route } from 'react-router-dom';
import PrivateRoute from './PrivateRoute';
class RouteWithSubRoutes extends React.PureComponent {
  render() {
    const route = this.props;
    return (
      <Route
        path={route.path}
        exact={route.exact}
        render={props => {
          if (!route.auth){
            return (
            <route.component {...props} routes={route.routes} />
            );
          }else{
            return (
              <PrivateRoute {...props} component={route.component} routes={route.routes} />
            );
          }
        }}
      />
    );
  }
}
export default RouteWithSubRoutes;

PrivateRoute.js（组件）

import React, {Component} from 'react';
import { Route, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { compose } from 'redux';
import { DAEMON } from '../constants';
import { makeSelectLoginStatus } from '../../containers/Login/selectors';
import saga from '../../containers/Login/saga';
import injectSaga from '../injectSaga';
import routesss from '../../../app/routes';
class PrivateRoute extends React.PureComponent {
  render() {
    const { component: Component, routes, authSuccess, ...rest } = this.props;
]    return (
      <Route
        {...rest}
        render={props =>
          authSuccess ? (
            <Component {...props} routes={routes} />
          ) : (
            <Redirect
              to={{
                pathname: '/admin/login',
                state: { from: props.location },
              }}
            />
          )
        }
      />
    );
  }
}
const withSaga = injectSaga({ key: 'login', saga, mode: DAEMON });
const mapStateToProps = createStructuredSelector({
  authSuccess: makeSelectLoginStatus(),
});
const withConnect = connect(mapStateToProps);
export default compose(
  withSaga,
  withConnect,
)(PrivateRoute);

但是，当我在渲染组件之后刷新页面时，页面破裂并且什么都没有弹出。我在控制台中没有任何错误。

有人可以帮我解决这个问题吗？

Answer 1

您可能正在使用来自react-router的BrowserRouter，并且后端刷新后无法在请求的路由上提供资源？