javascript - react router private route implementation is path props passed or not?

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 post https://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

question from:https://stackoverflow.com/questions/65939529/react-router-private-route-implementation-is-path-props-passed-or-not

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