React路由器的问题是它会渲染你的组件，因此会阻止你传入道具。另一方面，导航路由器允许你渲染你自己的组件。这意味着您不必像下面的代码和附带的JsFiddle显示那样跳过任何障碍来传递道具。

var Comments = ({myProp}) => <div>{myProp}</div>;

var stateNavigator = new Navigation.StateNavigator([
  {key:'comments', route:''}
]);

stateNavigator.states.comments.navigated = function(data) {
  ReactDOM.render(
    <Comments myProp="value" />,
    document.getElementById('content')
  );
}

stateNavigator.start();

React路由器v5.1 (React >= 16.8)这样做的方式:

<Route path="/comments">
    <Comments myprop="value" />
</Route>

现在，如果你想访问组件中的Route Props，你可以参考这个解决方案。对于函数组件，还有另一个钩子useParams()在那篇文章中没有提到。

更多参考:React Router v5.1

对于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 v4 alpha

现在有了一种新的方法，尽管和之前的方法很相似。

import { Match, Link, Miss } from 'react-router';
import Homepage from './containers/Homepage';

const route = {
    exactly: true,
    pattern: '/',
    title: `${siteTitle} - homepage`,
    component: Homepage
  }

<Match { ...route } render={(props) => <route.component {...props} />} />

附注:这只适用于alpha版本，并且在v4 alpha发布后被删除。在v4 latest中，同样是带有路径和精确props的。

React-lego是一个示例应用程序，它在react-router-4分支的routes.js中包含了这样做的代码

反应路由器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()重定向组件生命周期方法，检查位置等。

希望这能有所帮助!