React私有路由（PrivateRoute）组件工作原理解析咨询

Great question! Let's break down every part of this component so you understand exactly what's happening, including the syntax and prop flow.

1. The component: Component Syntax Explained #

This is ES6 object destructuring with renaming—a handy trick to clean up props handling. Here's what's going on:

When you call <PrivateRoute exact path='/home' component={Home} />, you're passing a component prop (lowercase c) pointing to your Home component.

The line const PrivateRoute = ({ component: Component, ...rest }) => { does two key things:

• It extracts the component prop from the props object passed to PrivateRoute.
• It renames that extracted value to Component (uppercase C) to follow React's convention of naming components with capital letters (since we'll be rendering it like a React component later).
• The ...rest collects all other props you passed (like exact, path) into a single object called rest—so we can pass them along to the underlying Route component without listing each one manually.

Think of it as shorthand for this more verbose code:

const PrivateRoute = (props) => {
  const Component = props.component;
  const rest = { exact: props.exact, path: props.path }; // captures all other props
  // ... rest of the component logic
}

2. Where Do the Props Come From? #

There are two distinct sets of props at play here:

a. Props You Manually Pass #

These are the props you include when using <PrivateRoute>—things like exact, path, and component. All except component get captured by the ...rest object to pass to the Route component.

b. Router-Injected Props #

When the underlying Route component matches the current URL path, React Router automatically injects three critical props into the render function's argument (props in your code):

• match: Contains details about how the URL matched the route (like URL parameters)
• location: The current URL location object
• history: Methods to navigate programmatically (like history.push())

We pass these props to your Component (e.g., Home) using <Component {...props} />, which is why you can access this.props.history or use hooks like useParams() inside the Home component.

3. Full Workflow Breakdown #

Let's walk through the entire process step by step:

1. You render <PrivateRoute exact path='/home' component={Home} /> in your app's routing setup.
2. React passes the exact, path, and component props to the PrivateRoute component.
3. PrivateRoute extracts component as Component and collects the remaining props into rest.
4. PrivateRoute returns a <Route> component, passing all the rest props to it—so the Route knows to match the /home path exactly.
5. When the user navigates to /home:
   • The Route component triggers its render function, passing in the router-generated props (match, location, history).
   • We check the result of isAuthenticated():
     • If it returns true: We render the Home component, passing along the router props so Home can use routing features.
     • If it returns false: We render a <Redirect> component that sends the user to the /login page instead.

This pattern is a classic way to protect routes in React Router—ensuring only authenticated users can access restricted pages.

内容的提问来源于stack exchange，提问作者Kevin.a