位置不匹配 - 嵌套的路線不工作

我試圖使用嵌套的路線，但它給了我以下錯誤：位置不匹配 - 嵌套的路線不工作

這裏是我的路線代碼。當我嘗試使用製造商的嵌套路線時出現錯誤。

import React from 'react'; 
import {Router, IndexRoute, Route, hashHistory} from 'react-router'; 
import { 
    App, 
    Home, 
    ManufacturerDetails, 
    ManufacturerList, 
    } from 'containers'; 

export default() => { 
    return (
    <Router history={hashHistory}> 
     <Route path="/" name="Home" component={App} > 

     <IndexRoute component={Home}/> 

     <Route name="Manufacturers" path="Manufacturers" component={ManufacturerList}> 
      <Route name="Manufacturer Details" path="/:manufacturer" component={ManufacturerDetails} /> 
     </Route> 

     </Route> 
    </Router> 
); 
};

來源

2016-11-30 Muhammad Ateeq Azam

我想這是因爲收盤路由標記''的'路徑=「/」'缺少 –

對不起，這只是複製 - 這裏是錯誤的。關閉路線在文件中。 –

哦，我看到了，我沒有深入細節，但根據我的經驗，兩條路徑應該放在同一水平。 '路徑=「製造商」和'路徑=「製造商/：製造商」'，即他們是兄弟姐妹。 –

嘗試從「製造商詳情」路線中刪除「/」部分。

<Route name="Manufacturer Details" path=":manufacturer" component={ManufacturerDetails} />

來源

2016-11-30 11:23:46

我試圖模仿你的情況，然後我得到了同樣的錯誤：

1st attempt

然後我做了修改，它的工作原理：

<Route name="Manufacturers" path="Manufacturers" component={ManufacturerList}> 
    <Route name="Manufacturer Details" path=":manufacturer" component={ManufacturerDetails}/> 
</Route>

即刪除前導/於/:manufacturer。它的工作原理：

1st solve

，它應該是有一個official test專門爲這條路線模式匹配。

然後我意識到你正在使用hashHistory，這將插入在地址欄中的哈希字符。只要小心不要讓'＃'與匹配的路線混亂，那麼它應該也可以。（或使用browserHistory作爲官方文檔建議，如果可能的話）。

2nd solve

來源

2016-11-30 12:57:23

位置不匹配 - 嵌套的路線不工作

回答

相關問題