React:如何使用 react-router 在视图之间共享状态

Question

>我正在使用react-router路由到两个彼此独立的视图。目前我一直在Home和Backend中使用新的状态对象，但我想摆脱它，因为两者都包含嵌套组件。

class App extends Component {
  render() {
    return (
        <Router>
          <div className="App">
            <Route exact={true} path="/" component={Home} />
            <Route path="/app/:user_id" component={Backend} />
          </div>
        </Router>
    );
  }
}

如何在不使用其他框架(如 redux 或 flux(的情况下在视图之间共享状态？

Answer 1

将

状态提升到您的"App"组件中，然后通过其 props 传递每个组件所需的状态元素。

例如，您在应用中的状态可能如下所示：

App.state = {
  homeRelatedStuff: {...},
  backendRelatedStuff: {...},
  sharedStuff: {...}
}

然后在声明要使用的组件时，传递 props：

<Route path={"/"} component={() => <Home homeStuff={this.state.homeRelatedStuff} sharedStuff={this.state.sharedStuff}/>}/>

*请注意将组件列为函数的方法略有不同，以便您可以传递 props

你的状态不必像我一样将它们分开，它可以更平坦，你可以将多个道具传递给每个组件