【问题标题】：Pass props created in app.jsx level through react router通过反应路由器传递在 app.jsx 级别中创建的道具
【发布时间】：2016-09-14 19:54:39
【问题描述】：

我有一个 react/redux 应用程序，我试图将一些道具传递到我的组件中。现在在我的 app.jsx 中，我只有一个非常直接的渲染，像这样：

ReactDOM.render(
  <Provider store={store}>
    <Router
      history={browserHistory}
      >
      {routes}
    </Router>
  </Provider>,
  rootElement
);

{routes} 看起来像

export default(
  <Route component={App} path="/">
    <Route component={MyComponent} path="/" />
  </Route>
);

我只想将一些道具传递给那个 App 组件。我尝试的第一件事是这样的：

ReactDOM.render(
  <Provider store={store}>
    <Router
      history={browserHistory}
      passedProp={passedProp}
      >
      {routes}
    </Router>
  </Provider>,
  rootElement
);

所以我试图在该 App 组件中有效地获取this.props.passedProp。我尝试谷歌搜索和其他一些东西，似乎无法提出正确的解决方案。有这样做的正确方法吗？谢谢！

【问题讨论】：

this.props.router.props.passedProp 或 this.props.router.passedProp 之类的东西在您当前的设置下不能在 App 内部工作吗？
你想从哪里传递道具？另外，请注意，为什么两个组件都使用路径/？

标签： javascript reactjs redux react-router

【解决方案1】：

您可以在AppComponent.jsx 的mapStateToProps 函数中执行此操作（假设在您的路线中使用import App from './AppComponent.jsx'。如果您详细说明passedprop 的来源和使用方式，我们可以提供更多帮助.

这是关于你可以在<Route> 中做什么的 react-router 文档：https://github.com/ReactTraining/react-router/blob/master/docs/API.md#route

【讨论】：

【解决方案2】：

反应路由器 4

您可以使用Match 组件和component 属性将道具直接传递给组件。

下面的代码示例将自定义属性label 和title 传递给Game 组件。

const route = {
    pattern: '/game',
    label: 'Star Wars Trivia',
    title: `${siteTitle} - Star Wars Trivia`,
    component: Game
  };
<Match { ...route } key={ i } render={(props) => <route.component {...props} routes={route.routes}/>} />

对于一个工作示例应用，请查看 react-lego 和 routes.js on the react-router-4 branch

【讨论】：