routerProps 是什么意思？

Question

有人可以解释一下 routerProps 和 {...routerProps} 是什么意思吗？

<Route path='/movies' render={routerProps => <MoviesPage {...routerProps} movies={this.state.movies}/>} />

Answer 1

Your question lacks context, for example, what routing library and version are you using? It could also easily be answered with a quick documentation reading or google search. Ill assume the library is react-router. routeProps (not routerProps) is an object holding, unsurprisingly, the route props. check https://reactrouter.com/core/api/Route/route-props

Additionally {...routeProps} creates a new object passing the routeProps properties as properties for the new object. its called spread operator and in this case its applied to an object literal. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Answer 2

This pattern calledRender Props .

A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.

In your example, Route 's prop render accepts a function with variable routerProps which of type object (because you can spread its entries {...object} using spread syntax ) and renders a React element.

<Route render={routerProps => <MoviesPage {...routerProps} movies={this.state.movies}/>} />

// Same, props === { path: 'some path' }
<Route render={props => <MoviesPage path={props.path} movies={this.state.movies}/>} />