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.state = { 
    homeRelatedStuff: {...}, 
    backendRelatedStuff: {...}, 
    sharedStuff: {...} 
} 

然後，你傳下去道具：

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

*注意列出的略有不同的方法組件的功能，因此你可以通過道具

你的狀態沒有讓他們分開像我有，也可能是平坦，你傳下去多個道具每個組件