Маршруты, требующие аутентификации, реагируют другим способом (PrivateRoutes)

Question

Я ищу способ защиты маршрута с помощью response-router-4.Глядя на пример в документации, они создают компонент, который отображается следующим образом:

<PrivateRoute path="/protected" component={Protected} />
and the privateRoute component:

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    fakeAuth.isAuthenticated ? (
      <Component {...props}/>
    ) : (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
  )}/>
)

Я не совсем понимаю, почему мне нужно передать компонент «Защищенный» как свойство, а затем иметьчтобы позаботиться о распространении всех ... реквизитов и ... остальных.

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

Поскольку мой пример (который, кажется, работает отлично), выглядит более упрощенным, я должен что-то упустить.

Есть ли недостатки этого подхода?

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';

import Nav from './Nav';

// dummy
const Auth = {
  isAuthenticated: () => { return true; }
}

const Home = () => <h1>Home</h1>
const SignIn = () => <h1>SignIn</h1>
const About = () => <h1>About</h1>
class PrivateOne extends Component {
  render() {
    console.log(this.props);
    return <h1>Private</h1>
  }
}
const PrivateTwo = () => <h1>PrivateTwo</h1>
const PrivateThree = () => <h1>PrivateThree</h1>
const NotFound = () => <h1>404</h1>

const Private = ({isAuthenticated, children}) => {
  return(
    isAuthenticated ? (
      <div>
        <h1>Private</h1>
        {children}
      </div>
    ) : (
      <Redirect to={{
        pathname: '/sign_in',
      }}/>
    )
  )
}

const App = () =>
  <div>
    <Router>
      <div>
        <Nav />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/sign_in" component={SignIn} />
          <Private isAuthenticated={Auth.isAuthenticated()}> {/* or some state later on */}
            <Route path="/private1" component={PrivateOne} />
            <Route path="/private2" component={PrivateTwo} />
            <Route path="/private3" component={PrivateThree} />
          </Private>
          <Route component={NotFound} />
        </Switch>
      </div>
    </Router>
  </div>

export default App;