如何使用react-router通过路由将道具传递给反应组件? [英] How to pass props to react component through routing using react-router?

问题描述

我想将一些道具传递给 IndexRoute 上的组件.下面是我的代码片段:

render(root: Element) {const { store, params } = this as any;ReactDOM.render(<Provider {...{ store }} ><路由器历史={browserHistory}><路由路径={window.location.pathname} 组件={App}><IndexRoute 组件={Step1}/><Route path="step1" component={() =>(<Step1 params={params}/>)}/><Route path="step1" component={() =>(<Step2 params={params}/>)}/></路线></路由器></提供者>， 根);}//应用组件import * as React from 'react';export var App: any = ({children}) =>(<div><div>{儿童}</div>

)

在初始加载时，我可以将 step1 作为子项加载，但我想将一些 props 从路由部分传递到组件.

我怎样才能得到这个?

请指导我.

谢谢，维杰

解决方案

您可以像这样通过 Route 对象简单地添加它们:

然后在 Step1 组件中，您可以再次通过 props 获取它们:

render() {控制台日志(this.props.route.someParams)；}

I want to pass some props to component on IndexRoute. Below is my code snippet:

render(root: Element) {
    const { store, params } = this as any;
    ReactDOM.render(
          <Provider {...{ store }} >
              <Router history={browserHistory}>
                  <Route path={window.location.pathname} component={App}>
                    <IndexRoute component={Step1} />
                    <Route path="step1" component={() => (<Step1 params={params} />)} />
                    <Route path="step1" component={() => (<Step2 params={params} />)} />
                  </Route>
            </Router>
          </Provider>
   , root);

}

//App Component
import * as React from 'react';


export var App: any = ({children}) => (

    <div>
        <div>{children}</div>
    </div>
)

On initial load I am able to load step1 as children but I want to pass some props from routing section to component.

How can I get this?

Please guide me.

Thanks, Vijay

解决方案

You can simply add them through the Route object like this:

<Route path="step1" someParams={params} component={Step1} />

And then in the Step1 component you can get them through the props again:

render() {
    console.log(this.props.route.someParams);
}

这篇关于如何使用react-router通过路由将道具传递给反应组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！