Передача матча на частный маршрут

Question

У меня есть код для частных маршрутов, которые требуют аутентификации.Я не могу понять, почему Match не передается дочернему компоненту.В дочернем компоненте через Private Route сопоставление происходит как undefined

Соответствие доступно, как ожидается, в дочерних компонентах для обычного Route, но не для PrivateRoute.

Routes.js

const Routes = () => {
  return (
    <Switch>
      <Route exact path="/register" component={Register} />
      <Route exact path="/login" component={Login} />
      <Route exact path="/password/:id?" component={Password} />
      <PrivateRoute exact path="/dashboard" component={Dashboard} />
      <PrivateRoute exact path="/c/new" component={NewComp} />
      <PrivateRoute exact path="/c/:id/manage" component={ManageComp} />
    </Switch>
  );
};

PrivateRoute.js

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

import Spinner from "../components/Common/Layout/Spinner";

const PrivateRoute = props => {
  const {
    component: Component,
    auth: { isAuthenticated, loading },
    ...rest
  } = props;

  if (loading) {
    return <Spinner />;
  }
  if (!isAuthenticated) {
    return (
      <Redirect
        to={{
          pathname: "/login",
          state: {
            alert: "login",
            redir: window.location.pathname + window.location.search
          }
        }}
      />
    );
  }
  return <Component {...props} />;
};

PrivateRoute.propTypes = {
  auth: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  auth: state.auth
});

export default connect(mapStateToProps)(PrivateRoute);

ManageComp.js

const ManageComp = ({
  loadComp,
  competition: { competition, loading },
  match
}) => {
  useEffect(() => {
    console.log(match); /*CONSOLE SHOWS MATCH AS UNDEFINED*/
    loadComp();
  }, []);

  return loading ? <Spinner /> : <div>PAGE HTML</div>;
};

ManageComp.propTypes = {
  loadComp: PropTypes.func.isRequired,
  competition: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  competition: state.competition
});

export default connect(
  mapStateToProps,
  { loadComp }
)(ManageComp);

Answer 1

В вашем PrivateRoute.js я думаю, что вам нужно вернуть маршрут

  return (
          <Route {...rest} render={(props) => (
            <Component {...props} />
          )}/>
        )

это пример моего PrivateRoute

const PrivateRoute = ({ component: Component, ...rest }) => {
  const isAuthenticated = stores.auth.isAuthenticated
  if(isAuthenticated){
            return (
              <Route {...rest} render={(props) => (
                <Component {...props} />
              )}/>
            )
  }

  return (
    <Route {...rest} render={(props) => (
      <Redirect to='/Login'/>
    )}/>
  )
}