重複組件在`react-router`中？

Question

我

 <Route path="profile" component={ProfilePage} > 
     <Route path="edit(/:profileId)" component={EditProfile} /> 
     <Route path="add(/:profileId)" component={AddProfile} /> 
     <Route path="view/:profileId" component={ProfilePage}/> 
     </Route> 

我的問題如果我的路徑view，我看到兩個profilePage組件

Answer 1

我在將Redux連接到我的React-Router應用程序時遇到同樣的問題。

因爲你沒有把你的整個路由在我必須假設你正在做類似的默認路由提示的陣營，路由器教程它應該是這樣的：

<Router history={browserHistory}> 
    <Route path="/" component={App} > 
     <IndexRoute component={IndexPage} /> 
     <Route path="profile" component={ProfilePage} > 
      <Route path="edit(/:profileId)" component={EditProfile} /> 
      <Route path="add(/:profileId)" component={AddProfile} /> 
      <Route path="view/:profileId" component={ProfilePage}/> 
     </Route> 
    </Route> 
<Router /> 

如果」再採用類似的結構，並在容器組件「應用」這樣的使用React.cloneElement（）：

{React.cloneElement(this.props.children, this.props)} 

你必須減少嵌套，因爲它是克隆了「ProfilePage」爲所有兒童孩子們也是如此。嘗試將其更改爲這樣：

<Router history={browserHistory}> 
    <Route path="/" component={App} > 
     <IndexRoute component={IndexPage} /> 
    </Route> 
    <Route path="/profile" component={ProfilePage} > 
     <Route path="edit(/:profileId)" component={EditProfile} /> 
     <Route path="add(/:profileId)" component={AddProfile} /> 
     <Route path="view/:profileId" component={ProfilePage}/> 
    </Route> 
<Router /> 

可以說，你可以消除「IndexPage」組件，如果你不具備進一步航線孩子關「應用」。

...打完這個後，我看到你的小圖像鏈接到你的模態。我相信這仍然是你的問題。使用React.cloneElement深度嵌套您的路線與父母可能會導致此。您可能能夠使用createElement傳遞道具而不是cloneElement以避免引用問題。看看這裏：Create Element另一個選擇是createComponent以及在地圖道具文檔。儘管如此，我還沒有嘗試過。

Answer 2

你可能想IndexRoute。嘗試這樣的事情：

<Route path="profile"> 
    <IndexRoute component={ProfilePath} /> 
    <Route path="edit(/:profileId)" component={EditProfile} /> 
    <Route path="add(/:profileId)" component={AddProfile} /> 
    <Route path="view/:profileId" component={ProfilePage}/> 
</Route>