tl;dr你最好的选择是使用 store 之类的，redux或者mobx在管理需要在整个应用程序中访问的状态时。这些库允许您的组件连接到/观察状态并随时了解任何状态更改。

什么是<Route>？

你不能通过<Route>组件传递 props 的原因是它们不是真正的组件，因为它们不渲染任何东西。相反，它们用于构建路由配置对象。

这意味着：

<Router history={browserHistory}>
  <Route path='/' component={App}>
    <Route path='foo' component={Foo} />
  </Route>
</Router>

相当于：

<Router history={browserHistory} routes={{
  path: '/',
  component: App,
  childRoutes: [
    {
      path: 'foo',
      component: Foo
    }
  ]
}} />

路线仅在初始安装时进行评估，这就是您不能将新props传递给它们的原因。

静态props

如果您有一些想要传递给商店的静态props，您可以创建自己的高阶组件，将它们注入商店。不幸的是，这只适用于静态props，因为如上所述，<Route>s 只被评估一次。

function withProps(Component, props) {
  return function(matchProps) {
    return <Component {...props} {...matchProps} />
  }
}

class MyApp extends React.Component {
  render() {
    return (
      <Router history={browserHistory}>
        <Route path='/' component={App}>
          <Route path='foo' component={withProps(Foo, { test: 'ing' })} />
        </Route>
      </Router>
    )
  }
}

使用 location.state

location.state是一种在导航时在组件之间传递状态的便捷方式。但是，它有一个主要缺点，即状态仅在您的应用程序中导航时才存在。如果用户点击了指向您网站的链接，则该位置不会附加任何状态。

使用商店

那么你如何将数据传递给你的路由component？一种常见的方法是使用类似reduxor的存储mobx。使用redux，您可以connect使用高阶组件将组件发送到商店。然后，当您的路线component（实际上是将您的路线组件作为其子项的 HOC）呈现时，它可以从商店中获取最新信息。

const Foo = (props) => (
  <div>{props.username}</div>
)

function mapStateToProps(state) {
  return {
    value: state.username
  };
}

export default connect(mapStateToProps)(Foo)

我不是特别熟悉mobx，但据我所知，它可以更容易设置。使用redux、mobx或其他状态管理之一是在整个应用程序中传递状态的好方法。

注意：您可以在此处停止阅读。下面是传递状态的合理示例，但您可能应该只使用商店库。

没有商店

如果您不想使用商店怎么办？你倒霉了吗？不，但是你必须使用React 的一个实验性特性：context. 为了使用context，您的父组件之一必须显式定义getChildContext方法和childContextTypes对象。任何想要通过 访问这些值的子组件context都需要定义一个contextTypes对象（类似于propTypes）。

class MyApp extends React.Component {

  getChildContext() {
    return {
      username: this.state.username
    }
  }

}

MyApp.childContextTypes = {
  username: React.PropTypes.object
}

const Foo = (props, context) => (
  <div>{context.username}</div>
)

Foo.contextTypes = {
  username: React.PropTypes.object
}

您甚至可以编写自己的高阶组件，自动将context值作为<Route> components 的props注入。这将是一个“穷人的商店”。你可以让它工作，但很可能比使用上述商店库之一效率低下并且错误更多。

怎么样React.cloneElement？

还有另一种为 a 提供props<Route>的方法component，但它一次只能在一个级别上工作。本质上，当 React Router 基于当前路由渲染组件时，它<Route>首先为最深嵌套匹配创建一个元素。然后，它children在为下一个最深嵌套的元素创建元素时将该元素作为prop传递<Route>。这意味着在render第二个组件的方法中，您可以使用React.cloneElement克隆现有children元素并向其添加额外的props。

const Bar = (props) => (
  <div>These are my props: {JSON.stringify(props)}</div>
)

const Foo = (props) => (
  <div>
    This is my child: {
      props.children && React.cloneElement(props.children, { username: props.username })
    }
  </div>
)

这当然很乏味，特别是如果您需要通过多个级别的<Route> components传递此信息。您还需要在您的基本<Route>组件（即<Route path='/' component={Base}>）中管理您的状态，因为您没有办法从<Router>.

我知道回答这个问题可能为时已晚，但是对于将来对此感到疑惑的任何人，您可以这样做：

export default class Routes extends Component {
constructor(props) {
    super(props);
    this.state = { config: 'http://localhost' };
}
render() {
    return (
        <div>
            <BrowserRouter>
                <Switch>
                    <Route path="/" exact component={App} />
                    <Route path="/lectures" exact render={() => <Lectures config={this.state.config} />} />
                </Switch>
            </BrowserRouter>
        </div>
    );
}

}

通过这种方式，您可以在 Lecture 组件中访问配置props。这是一个关于这个问题的小步，但首先它是一个很好的接触！:)

一旦路由器组件被挂载，你就不能改变 React-router 的状态。您可以编写自己的 HTML5 路由组件并监听 url 更改。

class MyRouter extend React.component {
   constructor(props,context){
   super(props,context);
   this._registerHashEvent = this._registerHashEvent.bind(this)

 } 

 _registerHashEvent() {
    window.addEventListener("hashchange", this._hashHandler.bind(this), false);
  }
  ...
  ...

render(){
  return ( <div> <RouteComponent /> </div>)
}

对于像我这样的人，

你也可以正常渲染这个：

import {
  BrowserRouter as Router, 
  Router, 
  Link, 
  Switch 
} from 'react-router-dom'

<Router>
  <Switch>
   <Link to='profile'>Profile</Link>

   <Route path='profile'>
     <Profile data={this.state.username} />
   </Route>
   <Route component={PageNotFound} />
  </Switch>
</Router>

这对我有用！

请注意，如果您使用的是 a query string，则需要添加search.

例如：

{
  key: 'ac3df4', // not with HashHistory!
  pathname: '/somewhere',
  search: '?some=search-string',
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
}

花了大约 20 分钟才弄清楚为什么我的路线没有被渲染 😅