javascript - 嵌套 react 路由器: did not match any routes

Question

我正在 React-Router 1.0.0-rc3 中设置嵌套路由。每当我尝试访问其中一个嵌套路线时，它都会抛出错误:“警告:位置“汽车/家庭汽车”与任何路线都不匹配”。

这是一个模型:

这是我的路线:

<Route path="/" component={App}>
  <IndexRoute component={Home} />

  <Route path="categories" component={CategoriesPage} />

  <Route path="categories/:slug" component={CategoryPage}>
    <Route path=":slug" component={ProductTypePage} />
    <IndexRoute component={CategoryPage} />
  </Route>

  <Route path="*" component={AppNotFound} />
</Route>

组件:

CategoryPage = React.createClass({
  renderNavLinks(type) {
    return (
      <li key={type.slug}>
        // "type.parent" is a category name, e.g.
        // <a href="http://www.myshop.com/categories/cars/family-cars">Citroën</a>
        <Link to={type.parent + "/" + type.slug}>{type.name}</Link>
      </li>
    );
  },
  render() {
    return (
      <div>
        <h1>{this.data.category[0].name}</h1>
        <nav>
          <ul>
            { R.map(this.renderNavLinks, this.data.productTypes) }
          </ul>
        </nav>
        <section>
          {this.props.children}
        </section>
      </div>
    );
  }
});

Answer 1

更新:

我重读了您的错误消息:

“警告:位置“汽车/家庭汽车”与任何路线都不匹配。

您确定您的链接会转到“/categories/cars/family-cars”而不仅仅是“/cars/family-cars”吗？

尝试像这样修复您的链接:

<Link to={"/categories/" + type.parent + "/" + type.slug}>{type.name}</Link>

原始答案:

问题似乎出在其他地方，因为当我尝试将路由器降级到 1.0.0-rc3 时，这些配置一切正常:

路线:

<Route path='/' component={ConnectedApp}>
  <IndexRoute component={ConnectedDetails} />
  <Route path='wishlist' components={ConnectedWishlist} />
  <Route path='categories/:details' component={ConnectedDetails}>
    <Route path=':edit' component={DetailsEdit} />
    <IndexRoute component={DetailsView} />
  </Route>
</Route>

侧边栏:

<div className='sidebar'>
  <Link activeClassName='sidebar-link_active' className='sidebar-link' to='/categories/lol/wut'>
    Persoonlijke gegevens
  </Link>

  <Link activeClassName='sidebar-link_active' className='sidebar-link' to='/categories/lol'>
    Verlanglijst
  </Link>
</div>