位置不匹配 - 嵌套路由不起作用答案

【问题标题】：Location did not match - Nested Routes Not Working位置不匹配 - 嵌套路由不起作用
【发布时间】：2017-04-14 10:43:16
【问题描述】：

我正在尝试使用嵌套路由，但它给了我以下错误：

这是我的路线代码。当我尝试为制造商使用嵌套路由时出现错误。

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>
  );
};

【问题讨论】：

我认为是因为缺少 path="/" 的结束路由标记 </Route>
对不起，这里只是复制粘贴错误。关闭路线在文件中。
哦，我明白了，我没有深入研究细节，但根据我的经验，两条路径应该放在同一级别。 path="Manufacturers" 和 path="Manufacturers/:manufacturer"，即他们是兄弟姐妹。
“/ABB”是否适用于这条路线？
是的，如果我把它们放在同一水平线上。它工作正常。

标签： reactjs react-router nested-routes

【解决方案1】：

我试图模拟你的情况，然后我得到了同样的错误：

然后我进行修改，它可以工作：

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

即删除 /:manufacturer 中的前导 /。它有效：

它应该有一个专门用于此路由模式匹配的official test。

然后我意识到您正在使用hashHistory，它将在地址栏中插入一个哈希字符。只是要小心不要让'#'与路由匹配混淆，那么它也应该没问题。（或者如果可能的话，按照官方文档的建议使用browserHistory。）

【讨论】：

【解决方案2】：

尝试从“制造商详细信息”路径中删除“/”部分。

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

【讨论】：