如果你不想写包装器，我想你可以这样做:

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}/>
);

使用ES6，你可以让组件包装内联:

<路由路径= " / "组件={()= > <应用myProp = {someValue} / >} >

如果你需要通过孩子:

<路由路径="/"组件={(道具)=> <App myProp={someValue}>{道具。孩子}< /应用程序>}>

用一个无状态的函数组件包装它:

<Router>
  <Route 
    path='/' 
    component={({children}) => 
      <MyComponent myProp={'myVal'}>{children}</MyComponent/>
    }/>
</Router>

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中包含了这样做的代码

更新

自新版本以来，可以直接通过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);
});

这是来自Rajesh的解决方案，没有yuji的不便评论，并为React Router 4更新。

代码是这样的:

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

注意，我使用渲染而不是组件。原因是为了避免不必要的重新挂载。我还将道具传递给该方法，并在Comments组件上使用对象展开操作符(ES7建议)。