我有以下结构为我的React.js应用程序使用React路由器:

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');

var Index = React.createClass({
  render: function () {
    return (
        <div>
            <header>Some header</header>
            <RouteHandler />
        </div>
    );
  }
});

var routes = (
  <Route path="/" handler={Index}>
    <Route path="comments" handler={Comments}/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);

ReactRouter.run(routes, function (Handler) {
  React.render(<Handler/>, document.body);
});

我想把一些属性传递给Comments组件。

(通常我会这样做,如<Comments myprop="value" />)

用React路由器最简单和正确的方法是什么?


当前回答

对于react-router 2.5.2,解决方案非常简单:

    //someConponent
...
render:function(){
  return (
    <h1>This is the parent component who pass the prop to this.props.children</h1>
    {this.props.children && React.cloneElement(this.props.children,{myProp:'value'})}
  )
}
...

其他回答

你可以像这样通过<RouterHandler/>传入props:

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');

var Index = React.createClass({
  render: function () {
    var props = this.props; // or possibly this.state
    return (
        <div>
            <header>Some header</header>
            <RouteHandler {...props} />
        </div>
    );
  }
});

这样做的缺点是你不加区别地传递道具。因此,Comments可能最终接收到的道具实际上是针对不同组件的,这取决于您的路由配置。这不是什么大问题,因为props是不可变的,但如果两个不同的组件都期望一个名为foo的道具,但值不同,这就会出现问题。

我已经在这里回答了这个问题。

下面是几种将道具传递给路由组件的方法。

使用react-router v5,我们可以通过封装组件来创建路由,这样我们就可以像这样轻松地将道具传递给所需的组件。

<Route path="/">
    <Home name="Sai" />
</Route>

类似地,您可以在v5中使用子道具。

<Route path="/" children={ <Home name="Sai" />} />

如果您正在使用react-router v4,您可以使用渲染道具传递它。

旁注-引用React路由器children-func文档

有时您需要呈现路径是否匹配位置或 不是。在这些情况下,您可以使用函数child prop。它的工作原理 和渲染完全一样,除了它会被调用是否有 匹配与否。

<Route path="/" render={() => <Home name="Sai" />} />

(最初发布于https://reactgo.com/react-router-pass-props/)

更新

自新版本以来,可以直接通过Route组件传递道具,而不使用Wrapper。例如,通过使用渲染道具。

组件:

class Greeting extends React.Component {
  render() {
    const {text, match: {params}} = this.props;

    const {name} = params;

    return (
      <React.Fragment>
        <h1>Greeting page</h1>
        <p>
          {text} {name}
        </p>
      </React.Fragment>
    );
  }
}

用法:

<Route path="/greeting/:name" render={(props) => <Greeting text="Hello, " {...props} />} />

Codesandbox例子


旧版本

我更喜欢的方法是包装Comments组件,并将包装器作为路由处理程序传递。

这是应用更改后的示例:

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');

var CommentsWrapper = React.createClass({
  render: function () {
    return (
      <Comments myprop="myvalue"/>
    );
  }
});

var Index = React.createClass({
  render: function () {
    return (
      <div>
        <header>Some header</header>
        <RouteHandler/>
      </div>
    );
  }
});

var routes = (
  <Route path="/" handler={Index}>
    <Route path="comments" handler={CommentsWrapper}/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);

ReactRouter.run(routes, function (Handler) {
  React.render(<Handler/>, document.body);
});

只是ColCh回答的一个后续问题。抽象一个组件的包装是很容易的:

var React = require('react');

var wrapComponent = function(Component, props) {
  return React.createClass({
    render: function() {
      return React.createElement(Component, props);
    }
  });
};

<Route path="comments" handler={wrapComponent(Comments, {myprop: value})}/>

我还没有测试这个解决方案,所以任何反馈都很重要。

需要注意的是,使用这种方法,任何通过Router发送的道具(比如params)都会被覆盖/删除。

反应路由器v 4解决方案

今天早些时候我偶然发现了这个问题,下面是我使用的模式。希望这对那些正在寻找最新解决方案的人有用。

我不确定这是否是最好的解决方案,但这是我目前的模式。我通常有一个核心目录,我保存我常用的组件及其相关配置(加载器,模态等),我包括一个这样的文件:

import React from 'react'
import { Route } from 'react-router-dom'

const getLocationAwareComponent = (component) => (props) => (
  <Route render={(routeProps) => React.createElement(component, 
{...routeProps, ...props})}/>
)

export default getLocationAwareComponent

然后,在有问题的文件中,我将执行以下操作:

import React from 'react'
import someComponent from 'components/SomeComponent'
import { getLocationAwareComponent } from 'components/Core/getLocationAwareComponent'
const SomeComponent = getLocationAwareComponent(someComponent)

// in render method:
<SomeComponent someProp={value} />

您会注意到我将组件的默认导出导入为humble camel-case,这让我可以在CamelCase中命名新的位置感知组件,以便正常使用它。除了额外的导入行和赋值行之外,组件的行为与预期一致,并正常接收它的所有道具,并添加了所有路由道具。因此,我可以愉快地使用this.props.history.push()重定向组件生命周期方法,检查位置等。

希望这能有所帮助!