Question

我问这个是因为我想知道这是否可能（如下），如果是这样，我的网页应该如何正常工作？

<Router history={browserHistory}>
    <Route path="/" component={Root}>
        <IndexRoute component={Home} />
        <Route path="404" component={Empty} />
        <Route path="about" component={About} />
        <Route path="archive" component={Archive} />
        <Redirect from="*" to="/404" />
    </Route>
    <Route path="dashboard" component={_Dashboard}>
        <IndexRoute component={_Master} />
        <Route path="post" component={_Post} />
        <Redirect from="*" to="/dashboard" />
    </Route>
</Router>

是否可以拥有＆＃34; /＆＃34;的路线？和＆＃34;仪表板＆＃34;和孩子一样是一个平等的孩子吗？

出于布局目的，我希望所有页面都嵌套在＆＃34; /＆＃34;使用Root组件的布局，而所有页面都嵌套在＆＃34; dashboard＆＃34;使用_Dashboard组件的布局。

更新（以下解决方案）

使我上面的工作不可行/可能的问题是由于我的根目录位于何处。继Thomas Sojka的回答解决了我的问题。

这里（下面）是我目前所拥有的，正如我所需要的那样（这次组件名称和路径略有不同，但总体思路和结构应足以显示解决方案）。

<Router history={browserHistory}>
    <Route path="/" component={Root}>
        <IndexRoute component={Home} />
        <Route path="404" component={Empty} />
        <Route path="about" component={About} />
        <Route path="archive" component={Archive} />
    </Route>
    <Route path="dashboard" component={_Root}>
        <IndexRoute component={_Home} />
        <Route path="404" component={_Empty} />
        <Route path="post" component={_Post} />
        <Route path="post-single" component={_PostSingle} />
        <Redirect from="*" to="404" />
    </Route>
    <Redirect from="*" to="404" />
</Router>

根级别的重定向必须与＆＃34; /＆＃34;的路由必须是同一级别的子级别。和＆＃34;仪表板＆＃34;，以及所有这些路线之后/之下，工作。我在原始问题中找到了这个重定向的位置，以便＆＃34;仪表板＆＃34;而且任何一个孩子都找不到。

为＆＃34;仪表板＆＃34;的任何一个孩子进行重定向位于它的工作地点。

Answer 1

您需要将404路线放在最后，否则永远不会找到/ dashboard路线：

  <Router history={browserHistory}>
    <Route path='/' component={Root}>
      <IndexRoute component={Home} />
      <Route path='404' component={Empty} />
      <Route path='about' component={About} />
      <Route path='archive' component={Archive} />
    </Route>
    <Route path='/dashboard' component={_Dashboard}>
      <IndexRoute component={_Master} />
      <Route path='post' component={_Post} />
      <Redirect from='*' to='/dashboard' />
    </Route>
    <Redirect from='*' to='/404' />
  </Router>

Answer 2

是的，这是可能的，唯一的问题是您需要以不同的方式指定子路线

<Router history={browserHistory}>
    <Route path="/" component={Root}>
        <IndexRoute component={Home} />
        <Route path="/404" component={Empty} />
        <Route path="/about" component={About} />
        <Route path="/archive" component={Archive} />
        <Redirect from="*" to="/404" />
    </Route>
    <Route path="/dashboard" component={_Dashboard}>
        <IndexRoute component={_Master} />
        <Route path="/dashboard/post" component={_Post} />
        <Redirect from="*" to="/dashboard" />
    </Route>
</Router>

Answer 3

首先，对于React-Router v3，您必须提供routes这样的属性

const routes = (
    // Your routes
);

<Router history={browserHistory} routes={routes} />

如果你没有，那么你会收到错误

警告：[react-router]位置＆＃34; /＆＃34;没有匹配任何路线

如果您只是为＆＃34; /＆＃34;分开路线？和＆＃34;仪表板＆＃34;没有root Route标签，它会给你错误

相邻的JSX元素必须包含在封闭标记中

定义路线的正确方法

const routes = (
    <Route path="/">
        <Route path="" component={Root}>
            <IndexRoute component={Home} />
            <Route path="404" component={Empty} />
            <Route path="about" component={About} />
            <Route path="archive" component={Archive} />
            <Redirect from="*" to="/404" />
        </Route>
        <Route path="dashboard" component={_Dashboard}>
            <IndexRoute component={_Master} />
            <Route path="post" component={_Post} />
            <Redirect from="*" to="/dashboard" />
        </Route>
    </Route>
);

<Router history={browserHistory} routes={routes} />

在React-Router v3中，所有路由都必须嵌套在<route>中，路径=＆＃34; /＆＃34;？

3 个答案: