react-router ：在没有 Redux 的路由之间共享状态

IT技术 reactjs react-router
2021-05-18 08:12:00

我想在 2 个兄弟路由 :Timesheets和Clients.
我想尝试使用“纯”React（无 Flux 架构）可以走多远。

这个例子有效，但我有一个错误：browser.js:49 Warning: [react-router] You cannot change <Router routes>; it will be ignored 所以，它似乎不喜欢异步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>
  );
}

是否可以将异步props发送到每条路线？
或者是否可以在父路由（Header组件）中设置整个状态，然后从每个子路由（Timesheets和Clients组件）访问这个状态？

2个回答

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

高铁

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

父路由 render()

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

你可以看看 reacts Context。Redux 也使用了 Context。它允许您将一些数据传递给所有孩子。但是您应该编写代码来使用这些数据，例如您已经确定了 contextTypes 等。

您可以查看有关如何使用它的文档的详细信息。

其它你可能感兴趣的问题
上一篇React Hooks：处理多个输入 下一篇在 React 中使用 setState 进行多次获取请求