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

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

class App extends Component {
  constructor(props){
    super(props);

    this.state = {
      data:null
    }


  }
 componentDidMount(){
   database.ref().on('value', (snapshot) =>{
     this.setState({
       data : snapshot.val()
      })
   });
 }

  render(){
  //  const { data } = this.state
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path = "/" component = { LandingPage }  />
        <Route 
          path='/signup' 
          render = { () => <Signup  data = {this.state.data} />} />
        </Switch>
    </BrowserRouter>

  );
  }
};

export default App;

在react-router-v3中，我没有找到任何工作解决方案，所以我做了一个很大的权衡，使用类继承而不是道具。

例如:

class MyComments extends Comments{
  constructor(props) {
    super(props);
    this.myProp = myValue;
  }
}

并且，你在路由器的组件中使用MyComments而不需要道具。

然后，你可以用这个。myProp在componentDidMount()函数中获取myValue;

更新

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

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

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

使用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/)

你也可以使用RouteHandler mixin来避免包装器组件，更容易地将父类的状态作为道具传递下去:

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');
var RouteHandler = require('react-router/modules/mixins/RouteHandler');

var Index = React.createClass({
      mixins: [RouteHandler],
      render: function () {
        var handler = this.getRouteHandler({ myProp: 'value'});
        return (
            <div>
                <header>Some header</header>
                {handler}
           </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);
});