如何通过react_router传递状态？

Question

下面是给我带来麻烦的文件：

var Routers = React.createClass({

  getInitialState: function(){
    return{
      userName: "",
      relatives: []
    }
  },

  userLoggedIn: function(userName, relatives){
    this.setState({
      userName: userName,
      relatives: relatives,
    })
  },

  render: function() {
    return (
      <Router history={browserHistory}>
        <Route path="/" userLoggedIn={this.userLoggedIn} component={LogIn}/>
        <Route path="feed" relatives={this.state.relatives} userName={this.state.userName} component={Feed}/>
      </Router>
    );
  }
});

我试图通过路由将新的this.state.arriations和this.state.username传递到我的“feed”组件中。但我收到一条错误消息：

我知道为什么会发生这种情况，但不知道如何将状态传递给我的“feed”组件。在过去的5个小时里，我一直在试图解决这个问题，我变得非常绝望！

请救命！谢谢

下面的答案很有帮助，我感谢athors，但他们不是做到这一点的最简单的方法。在我的例子中，最好的方法是这样的：当您更改路线时，只需向其附加一条消息，如下所示：

browserHistory.push({pathname: '/pathname', state: {message: "hello, im a passed message!"}});

<Link 
    to={{ 
    pathname: '/pathname', 
    state: { message: 'hello, im a passed message!' } 
  }}/>

  componentDidMount: function() {
    var recievedMessage = this.props.location.state.message
  },

Answer 1

在管理需要在整个应用程序中都可访问的状态时，最好的方法是使用类似redux或mobx的存储。这些库允许组件连接/观察状态，并随时了解状态变化的最新情况。

不能通过 组件传递道具的原因是它们不是真正的组件，因为它们不呈现任何内容。相反，它们用于构建路由配置对象。

这意味着：

<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
    }
  ]
}} />

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是导航时在组件之间传递状态的方便方法。但是，它有一个主要的缺点，即只有在应用程序中导航时才存在状态。如果一个用户跟随一个链接到您的网站，将没有状态附加到该位置。

那么如何将数据传递给路由的组件？一种常见的方法是使用类似redux或mobx的存储。使用Redux，可以使用更高阶的组件将组件连接到存储区。然后，当路由的组件（实际上是HOC，将路由组件作为其子组件）呈现时，它可以从存储中获取最新信息。

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

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

export default connect(mapStateToProps)(Foo)

我对mobx不是特别熟悉，但根据我的理解，它甚至更容易安装。使用redux、mobx或其他状态管理是在整个应用程序中传递状态的好方法。

如果你不想用商店怎么办？你运气不好吗？没有，但是您必须使用React的一个实验性特性:上下文。为了使用上下文，您的一个父组件必须显式定义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
}

您甚至可以编写自己的高阶组件，自动将上下文值作为 组件的道具注入。这有点像“穷人的商店”。您可以让它工作，但很可能比使用前面提到的存储库之一效率更低，而且bug更多。

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

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>
)

这当然是乏味的，特别是如果您需要通过多个级别的 组件传递这些信息。您还需要在基础 组件（即 )中管理状态，因为您无法从 的父组件中注入状态。