react-router :在没有 Redux 的路由之间共享状态 [英] react-router : share state between Routes without Redux

问题描述

我希望在 2 个兄弟路由之间共享状态(远程获取的客户端列表):Timesheets 和 Clients.
我想尝试使用纯"React(无 Flux 架构)可以走多远.

这个例子有效，但我有一个错误:browser.js:49 警告:[react-router] 你不能改变 <Router routes>;它将被忽略所以，它似乎不喜欢异步道具.

构造函数(道具){超级(道具)；this.state = {客户:[]}}componentDidMount() {获取(clients.json").then(response => response.json()).then(clients => this.setState({clients }));}使成为() {返回 (<路由器历史={browserHistory}><Route path="/" component={Header} ><Route path="timesheet" component={() =>(<时间表{...this.state}/>) }/><Route path="clients" component={() =>(<Clients {...this.state}/>) }/></路线></路由器>);}

是否可以将异步道具发送到每条路线?
或者是否可以在父路由(Header 组件)中设置整个状态，然后从每个子路由(Timesheets 和 Clients> 组件)?

解决方案

您可以使用 高阶组件 来获取和注入数据到你的顶级组件.然后你可以通过 React.cloneElement 将 props 传递给子路由.

HOC

const FetchHOC = url =>组件 =>类扩展 React.Component() {状态 = { 数据:空 };componentDidMount() {fetch(url).then(data => this.setState({ data }));}使成为() {return <Component {...this.props} {...this.state.data}/>;}}

路由配置

<路由路径=subroute1"组件={SubRoute1}/><路由路径=子路由2"；组件={SubRoute2}/></路线>

父路由render()

{this.props.children &&React.cloneElement(this.props.children, {数据:this.props.data，//...})}

I would like to have a shared state (list of clients fetched remotely) between 2 sibling Routes : Timesheets and Clients.
I want to try how far i can go with 'pure' React (No Flux architecture).

This example works, but I have an error : browser.js:49 Warning: [react-router] You cannot change <Router routes>; it will be ignored So, it doesn't seem to like async props.

constructor(props) {
   super(props);
   this.state = {
      clients : []
   }
}

componentDidMount() {
   fetch("clients.json")
     .then(response => response.json()) 
     .then(clients => this.setState({ clients }));
}

render() {
  return (
    <Router history={browserHistory}>
      <Route path="/" component={Header} >
        <Route path="timesheet" component={() => (<Timesheets {...this.state} />) }/>
        <Route path="clients" component={() => (<Clients {...this.state} />) }/>
      </Route>
    </Router>
  );
}

Is it possible to send async props down to each route?
Or is it possible to set the whole state in the parent route (Header component) and then access this state from each child route (Timesheets and Clients components)?

解决方案

You can use an high-order component to fetch and inject data to your top level component. Then you can pass props to sub routes via React.cloneElement.

HOC

const FetchHOC = url => Component => class extends React.Component() {
   state = { data: null };
   componentDidMount() { 
      fetch(url).then(data => this.setState({ data })); 
   }
   render() {
      return <Component {...this.props} {...this.state.data} />;
   }
}

Route configuration

<Route path="/" component={FetchHOC('http://some-url')(App)}>
   <Route path="subroute1" component={SubRoute1} />
   <Route path="subroute2" component={SubRoute2} />
</Route>

Parent route render()

<div className="App">
   {this.props.children && React.cloneElement(this.props.children, {
      data: this.props.data,
      // ...
   })}
</div>

这篇关于react-router :在没有 Redux 的路由之间共享状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！