Reputation: 181
I'm setting up nested routes within React-Router 1.0.0-rc3. Whenever I try to access one of the nested routes it throws an error: "Warning: Location "cars/family-cars" did not match any routes".
Here is a mockup:
This is my routes:
<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>
Component:
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>
);
}
});
Upvotes: 0
Views: 4747
Reputation: 582
UPD:
I reread your error-message:
"Warning: Location "cars/family-cars" did not match any routes".
Are you sure your Link goes to "/categories/cars/family-cars" and not just to "/cars/family-cars"?
Try to fix your link like this:
<Link to={"/categories/" + type.parent + "/" + type.slug}>{type.name}</Link>
Original answer:
It seems that the problem lies somewhere else, because when I try to downgrage router to 1.0.0-rc3, everything is working fine with these configs:
Routes:
<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>
Sidebar:
<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>
Upvotes: 3
Reputation: 7601
I have implemented like
Index.js is my entry point of application which contain below mentioned code
fetchData(config.url+'/Tasks.json?TenantId='+config.TenantId).then(function(items)
{
var TaskData=JSON.parse(JSON.stringify(items.json.Tasks));
var Data=[];
Object.keys(TaskData).map(function(task){
if(TaskData[task].PageName !=='' && TaskData[task].PageUrl !=='')
{
Data.push({PageName:TaskData[task].PageName,path:TaskData[task].PageName+'/?:RelationId',PageUrl:TaskData[task].PageUrl});
}
});
Data.push({PageName:'ContainerPage',path:'/ContainerPage/?:RelationId',PageUrl:'./pages/ContainerPage'});
var routes=require('./routes')(Data);
Router.run(routes,function(Handler){
React.render(<Handler />,document.getElementById('root'));
});
}).catch(function(response)
{
showError(response);
});
over here I have created one Data array which can contain the Routes details and I have passed those array in my route.js file which is creating Route of passed data so my route.js file contain below mentioned code
export default (data =>
<Route name="App" path="/" handler={App}>
<NotFoundRoute handler={require('./pages/PageNotFound')} />
</Route>
{ data.map(task =>
<Route name={task.PageName} path={task.path} handler={require(task.PageUrl)}>
</Route>
) }
</Route>
);
hope this may help you :)
Upvotes: 1