Вложенный реактивный маршрутизатор: не соответствует никаким маршрутам

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

UPD:

Я перечитал ваше сообщение об ошибке:

Предупреждение: Местоположение «Автомобили/семейные автомобили» не соответствует никаким маршрутам ».

Вы уверены, что ваша страница переведена на "/ categories/cars/family-cars", а не только "/ cars/family-cars"?

Попытка исправить ссылку так:

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

Оригинальный ответ:

кажется, что проблема лежит где-то еще, потому что, когда я пытаюсь downgrage маршрутизатор 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> 

Answer 2

Я реализовал как

index.js моя точка входа в приложении, которое содержит нижеуказанного код

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

здесь я создал один массив данных, который может содержать маршруты, деталь и я прошел этот массив в моем файле route.js, который создание маршрута пройденных данных, чтобы мой файл route.js содержат нижеуказанным код

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

надеюсь, что это может помочь вам :)