react-router-将道具传递给处理程序组件

Use the solution like above and this works in v3.2.5.

<Route
  path="/foo"
  component={() => (
    <Content
      lang="foo"
      meta={{
        description: lang_foo.description
      }}
    />
  )}
/>

or

<Route path="/foo">
  <Content
    lang="foo"
    meta={{
      description: lang_foo.description
    }}
  />
</Route>

对于反应路由器2.x。

const WrappedComponent = (Container, propsToPass, { children }) => <Container {...propsToPass}>{children}</Container>;

在你的路线上...

<Route path="/" component={WrappedComponent.bind(null, LayoutContainer, { someProp })}>
</Route>

确保第三个参数是类似的对象{ checked: false }。

这是我想出的最干净的解决方案（React Router v4）：

<Route
  path="/"
  component={props => <MyComponent {...props} foo="lol" />}
/>

MyComponent仍然有props.match和props.location，并且有props.foo === "lol"。

在1.0和2.0中，您可以使用createElementprop of Router指定如何精确地创建目标元素。文件来源

function createWithDefaultProps(Component, props) {
    return <Component {...props} myprop="value" />;
}

// and then    
<Router createElement={createWithDefaultProps}>
    ...
</Router>

您可以通过将道具传递到<RouteHandler>v0.13.x中或在v1.0中的Route组件本身来传递道具。

// v0.13.x
<RouteHandler/>
<RouteHandler someExtraProp={something}/>

// v1.0
{this.props.children}
{React.cloneElement(this.props.children, {someExtraProp: something })}

（摘自https://github.com/rackt/react-router/releases/tag/v1.0.0的升级指南）

所有子处理程序都将收到相同的道具集-视情况而定是否有用。

使用ES6，您可以使组件包装器内联：

<Route path="/" component={() => <App myProp={someValue}/>} >

如果您需要让孩子通过：

<Route path="/" component={(props) => <App myProp={someValue}>{props.children}</App>} >

这是Rajesh提供的解决方案，没有yuji的不便之处，并已针对React Router 4进行了更新。

代码如下：

<Route path="comments" render={(props) => <Comments myProp="value" {...props}/>}/>

请注意，我使用render代替component。原因是为了避免不必要的重新安装。我也将传递props给该方法，并且在Comment组件上使用与对象散布运算符相同的道具（ES7提案）。

复制ciantic在接受的回复中的评论：

<Route path="comments" component={() => (<Comments myProp="value" />)}/>

我认为这是最优雅的解决方案。有用。帮助过我。

如果您不想编写包装器，我想您可以这样做：

class Index extends React.Component { 

  constructor(props) {
    super(props);
  }
  render() {
    return (
      <h1>
        Index - {this.props.route.foo}
      </h1>
    );
  }
}

var routes = (
  <Route path="/" foo="bar" component={Index}/>
);