Итак, я использую PrivateRoute in React для обслуживания некоторых компонентов. Все работало нормально, пока я не указал точный путь, как показано ниже:

 <PrivateRoute exact path="/info/:id" render={(props) => <BookInfo {...props} />} />
 

Приведенный выше путь работает нормально, если я использую его Route в обычном режиме, но маршрутизация PrivateRoute выдает мне следующую ошибку.

PrivateRoute.js

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

const PrivateRoute = ({ component: Component, auth, ...rest}) => (
    <Route {...rest} render={ props => 
        auth.isAuthenticated === true ?
        (<Component {...props}/>) : (<Redirect to ='/login'/>)}/>
)

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

export default connect (mapStateToProps)(PrivateRoute);
 

Я не знаю, что является причиной этого, некоторая помощь очень ценится.

Проблема

Ваш PrivateRoute компонент ожидает component передачи реквизита, он не обрабатывает другие реквизиты Route , которые обрабатывает компонент.

 const PrivateRoute = ({
  component: Component, // <-- only handles component prop
  auth, ...rest
}) => (
  <Route {...rest} render={ props => 
    auth.isAuthenticated === true ?
    (<Component {...props}/>) : (<Redirect to ='/login'/>)}/>
)
 

Решение

Передайте свой BookInfo запрос в component prop, чтобы он был передан по каналу.

 <PrivateRoute exact path="/info/:id" component={BookInfo} />
 

Реорганизуйте свой PrivateRoute компонент, чтобы отобразить либо a Route со всеми переданными ему реквизитами, либо Redirect компонент.

 const PrivateRoute = ({ auth, ...props }) => auth.isAuthenticated ? (
    <Route {...props} />
  ) : (
    <Redirect to ='/login'/>
  );