我正在 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>
);
}
});
最佳答案
更新:
我重读了您的错误消息:
“警告:位置“汽车/家庭汽车”与任何路线都不匹配。
您确定您的链接会转到“/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>
关于javascript - 嵌套 react 路由器: did not match any routes,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33607810/