react-router或模糊路由中的多個匹配

我有一個構建路由的任務，它維護兩種類型的組件：邊欄和內容。如果url包含category-:type我必須呈現補充工具欄組件，並且如果url包含任何類型的內容，如profile,about或seller我必須呈現正確的內容。
如果爲側欄和內容類型的每個組合創建<Route />，則會有很多項目。
如何爲此構建路由？據我所知，我不能使用像<Route path="/**/:profile" component={Profile}>這樣的路由，因爲如果路由器將匹配此路徑，它將停止並避免其他比較。react-router或模糊路由中的多個匹配

這裏是我當前的路由

const history = syncHistoryWithStore(browserHistory, routing); 
ReactDOM.render(
    <Router history={history}> 
     <Route path="/" component={Base}> 
     <IndexRedirect to="signin" /> 
     <Route path="n=:id/:title" component={Item} /> 
     <Route path="search(/:type)" component={require_auth(Search)} /> 
     <Route path="people(/:type)" component={require_auth(People_Layout)} /> 
     <Route path="person/:id" component={require_auth(Person_Scene_Layout)} /> 
     <Route path="signin" component={Signin} /> 
     <Route path="signup" component={Signup} /> 
     <Route path="profile" component={require_auth(Profile)} /> 
     </Route> 
    </Router> 
    , document.querySelector('#appRoot') 
);

所以，我要擴展這個代碼，讓側欄導航在同一時間。我需要保留當前的路由併爲匹配的邊欄添加路由，例如<Route path="category-:type/n=:id/:title" component={Item} />。此路由可以同時呈現<Sidebar/>和<Item/>組件，但爲了使其與所有其他路由一起工作，我必須將幾乎所有現有路由的數量翻倍。

來源

2016-12-24 Pavel Poberezhnyi

無法理解確切的問題。也許多一點解釋可以幫助 – Swapnil

通過顯示你的確切'路線' –

所以，如果我正確理解你的問題，你要渲染動態基於路由器PARAMS像

導航組件元件的需求 - 有些側欄導航
內容組件 - 個人主頁上，一下，賣家等

所以，你不能直接過濾組件和路由器中的注入。但是你可以做的基本上是

使用路徑啓動任何路由器導航父組件=「/ *」
和裏面的父組分的是，檢查路由器的價值PAMAS /查詢由

this.props.location.query.yourParamName

並在此基礎上爲您注入子組件，即導航或內容。

<Router history={hashHistory} > 
    <Route path="/*" component='ParentComponent'/>  
</Router> 


export default class CartItem extends React.Component { 
    render() { 
     // check for Router Params and decide the Child Componenton on fly using any conditional statement. 
     // var Component = this.props.location.query.yourParamName 
     return (
      <div className='parent-wrapper'> 
       React.createElement(Component, props, ...children) 
      </div> 
     ); 
    } 
}

來源

2016-12-24 18:45:37 Ravi

感謝你的回答，使你的問題得到妥善解決。我的第一意圖是一樣的。但是這種方法幾乎沒有什麼缺點：如果路線對於內部孩子來說會更加複雜，那麼它可以打破這種解決方案。如果我找不到其他的路由器，請嘗試使用此解決方案 –

只需將路由末尾放置在路由器中，路徑=「/ *」將與任何URL匹配。我沒有發現任何缺點，所以如果可以提供一些場景，那將會很棒。另外，如果符合您的要求，您可以將我的答案標記爲已接受或已上傳。 – Ravi

是的。這是我的情況。謝謝！ –

react-router或模糊路由中的多個匹配

回答

相關問題