react-router 4

Question

我有一个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。我尝试使用谷歌搜索和其他一些东西，似乎无法提出正确的解决方案。这样做有正确的方法吗？谢谢！

Answer 1

您可以在mapStateToProps的{{1}}函数中执行此操作（假设在您的路线中使用AppComponent.jsx。如果您详细说明了{{1}的详细信息，我们可以提供更多帮助来自及如何使用它。

以下是关于您可以在import App from './AppComponent.jsx'中执行的操作的react-router文档：https://github.com/ReactTraining/react-router/blob/master/docs/API.md#route

Answer 2

react-router 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

通过反应路由器传递在app.jsx级别创建的道具

2 个答案:

react-router 4