javascript - react路由中如何向组件传参数呢

问题描述

问 题

加入代码中有这样一个路由需要渲染;

render(
    <Router history = {browserHistory} >
    <route path ="/" component={App} >
        <IndexRoute  component={Home} />
        <route path ="/jianjie" component={jianjie} />
        <route path ="/yewu" component={yewu} />
        <route path ="/lianxi" component={lianxi} />
        <route path ="/about" component={About} />
        <route path ="/test" component={test} />
    </route>
</Router>, ele)

但是App组件是这样的；

import React ,{ Component }from 'react';
import Nav from './nav';
import Foot from './foot';

class App extends Component{
    constructor(props){
        super(props);
    }
    render(){
        return (
            <div>
                {this.props.name}
                <Nav />
                {this.props.children}
                <Foot />
            </div>
        )
    }
}
export default App;

App组件中这个 {this.props.name}是通过外面参数传递进来的，但是上面的代码中怎么向App传递参数呢；

如果是单纯的渲染App可以这样写：

render(
    <App {...props}/>, ele)

希望有知道的朋友帮忙解答一下啊

解决方案

讲道理。react-router 封装的这些组件，是不允许你自定义传props的。只支持那几个固定的，比如history，
params，location，route等等，都是跟路径参数有关的。
如果想传一些自定义的数据，可以结合redux，直接connect往组件里传store。。
因为你直接给Router或者Route穿props 其实是给了Router组件，它不会帮你做注入props。
可以自己尝试封装一层。- -
还是用react-redux吧...

这篇关于javascript - react路由中如何向组件传参数呢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！