反应路由器私有路由实现是否通过了路径道具？

Question

Hello everyone this is more of a request asking review on my understanding of private route implementation in react.js rather than a question. Many implementations of private routes with authentication seem to have this same code posted

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

now as far as I know the 3 dots is the spread operator which basically assigns the passed object. Further SO answer also corroborates it What do these three dots in React do? especially the answer from Mehdi Raash. Now my understanding is that this basically means that the 'path' prop is also passed in the...rest object just like

<Route path={rest.path} render={(props) => (
        fakeAuth.isAuthenticated === true
          ? <Component {...props} />
          : <Redirect to='/login' />
      )} />

but recently i have came across this posthttps://ui.dev/react-router-v4-protected-routes-authentication/ and this line just doesn't make sense to me

A few notes on the above code. With Route, if a path isn’t supplied, then that Route will always match. So in the case above, because we didn’t supply a path prop, the Route will always match which means the render prop will always be called. 

So I just want to know whether this statement is correct and path props isn't being passed in the private route implementation and if so then what is this {...rest} doing in the Route.

Note: No offence for the author behind the article i just want my understanding stand corrected if I am wrong

Answer 1

The spread operator basically puts all remaining properties into a new object called rest in your case. Let's say that PrivateRoute was initiated like this:

<PrivateRoute component={Home} path="/protected" secure={false} />

component was desctructured and renamed to Component in your example. This means that rest looks like this:

rest = {
  path: "/protected",
  secure: false
}

What happens next is that the rest object is spreaded into the Route . So this:

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

is the same as this:

<Route path={res.path} secure={res.secure} render={(props) => ()} />

or this:

<Route path="/protected" secure={false} render={(props) => ()} />

By the way, the props in the render() function only contain three props and they come from the Router:

• match
• location
• history