陣營路由器V4嵌套的路線及方案導航

index.js

<Route exact path={pathDefault} component={Home}> 
    <Route path={path1} component={component1}/> 
    <Route path={path2} component={component2}/> 
</Route>

component1.js

<Route exact path={`${props.match.url}`} component={Summary}/> 
<Route path={`${props.match.url}`/someOtherPath1} component={SubComponent1}/> 
<Route path={`${props.match.url}`/someOtherPath2} component={SubComponent2}/>

COMPONENT2 .js設置相似。

這裏的想法是，我有多個頂級路線，其中有默認頁面。但是，然後，可以切換的子路線。這工作正常，直到當在像component1/someOtherPath2這樣的子級別路線之一時，我可以在someOtherPath1和someOtherPath2之間切換，但是如果我然後嘗試使用history.push(path2)更改其中一個頂級路線，而不是返回到頂級組件（即path1的默認組件），它最終會推送一個複合的，因此不正確的路線，如component1/component2。

那麼，如何以較低級別的組件編程更改更高級別的路由（最好使用history.push或類似的方法）？

來源

2017-10-14 Araymer

只要您從注入反應路由器時導入歷史記錄，就可以使用'history.push'。一旦你將它導入你的組件，你可以像正常一樣使用'history.push'。如果您遇到困難，請告訴我，我將爲您創建一個沙箱。 – Win

你是什麼意思從注入時導入它？你的意思是設置''的東西？ – Araymer

我應該提到，我在組件上使用'withRouter'來獲取道具的歷史記錄。 – Araymer

history.push需要路徑作爲參數，而不是部件：

history.push（路徑，[狀態]）

例如：

history.push('/home');

或

history.push('/home', { some: 'state' });

你可以在docs中閱讀更多關於它的信息。

編輯：

此外，如果你想改變的根路徑不要忘了領先/。例如：

history.push('/path1/path2');

來源

2017-10-14 11:07:26 patotoma

我正在處理與組件名稱相同的組件的路徑。對困惑感到抱歉。爲了清晰起見，我會編輯。 – Araymer

@Araymer當你想改變根路徑時，你是以'/'開頭的嗎？像'history.push（'/ path1/path2'）;' – patotoma

當我嘗試在前面添加斜線時出現錯誤： '無法在'History'上執行'pushState'：歷史狀態對象與URL'http：// path_to/classify_records'不能在源文件'http：// localhost：3000'和URL'http：// localhost：3000/path_to'中創建。 – Araymer

陣營路由器V4嵌套的路線及方案導航

回答

相關問題