react-router中对的params的传递？

Question

其实react-router中的params属性是怎么传递的？

比如说：

ReactDOM.render(
        <Provider store = {store}>
            <Router history={browserHistory}>
                <Route path='/' component={Main}>
                    <IndexRoute component={PostsContainer}></IndexRoute>
                    <Route path="/page(/:pageNum)" component={PostsContainer}/>
                    <Route path="/category/:categorySlug(/:pageNum)" component={PostsContainer}/>
                    <Route path='/:slug' component={PostContainer}/>
                </Route>
            </Router>
        </Provider>,
    document.getElementById('root')
)

Mai组件是这样的：

render(){
        return (
            <div>
                <Header/>
                <div className='main-content'>
                    {this.props.children}
                </div>
                <Footer/>
            </div>
        )
    }
    

组件没有写全，但是结构大概是这样的。当路由到PostsContainer的时候，我发现Main组件和PostsContainer组件都是可以params属性的，但是Header组件和Footer组件是没有办法拿到的。

请问这是问什么？路由的params到底是怎么传播的？路由变了导致匹配到这个路由的组件的属性也改变了，就是这个this.props.params.或者说react-router是什么原理？查了很久发现很少讲到这个params的，或者说路由究竟是怎么和组件交互，匹配的

Answer 1

又找了一下，看到有一篇文章是这样说的：

路由匹配
React router 处理路由匹配 的方法与其它路由器相似：

`<Route path="users/:userId" component={UserProfile} />` 

这个路由会匹配当用户访问任何以 users/ 开头，后面跟着任意值的路径。它会匹配 /users/、/users/143，甚至是 /users/abc （如果是这样你将需要自己校验）。
React Router 会将 :userId 的值作为 prop 传递给 UserProfile。这个属性可以通过UserProfile 内的 this.props.params.userId 访问。

应该是这样的了把？

Answer 2

<Header/>和<Footer />改成，没有props，是无法将params传递到组件内部的

<Header {...this.props}/>

<Footer {...this.props}/>

params具体是什么呢？我也不能回答。

Answer 3

<Route path="/slot/:name/:type" component={SlotItemsContainer} />
<SlotGameItems {...this.props}/>
const {name, type} = this.context.router.params;

Answer 4

说一个直白点的，只有直接挂载在 Router 上的 Component 才会有 react-router 的 params，对于本问题中就是 Redux 的 Container，而你的 Header Footer 并没有直接挂载在 Router 上，可以通过 <Header {...this.props} /> 的方式把 params 传给 Header

Answer 5

对于问主贴出的代码，就是PostsContainer这个组件，会获取到params这个props，其中根据实际的请求url，里面可能会出现categorySlug, pageNum, slug这几个属性