Nested React-router: Did Not Match Any Routes

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 matc

Solution 1:

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:

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

Sidebar:

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

Solution 2:

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)
{
    varTaskData=JSON.parse(JSON.stringify(items.json.Tasks));
    varData=[];
    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

exportdefault (data =><Routename="App"path="/"handler={App}><NotFoundRoutehandler={require('./pages/PageNotFound')} /></Route>
{ data.map(task =><Routename={task.PageName}path={task.path}handler={require(task.PageUrl)}></Route>
    ) }
</Route>
);

hope this may help you :)