Question

我在React-Router 1.0.0-rc3中设置嵌套路由。每当我尝试访问其中一个嵌套路由时，它都会抛出一个错误：＆＃34;警告：位置＆＃34;汽车/家庭汽车＆＃34;没有匹配任何路线＆＃34;。

这是一个模型：

这是我的路线：

<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：

我重读了您的错误消息：

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

你确定你的Link会转到“/ 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>

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

希望这可以帮助你：）

嵌套react-router：与任何路由都不匹配

2 个答案: