reactjs – React路由器 – 嵌套路由不工作

发布时间：2020-12-15 06:26:07 所属栏目：百科来源：网络整理

导读：我的目标是让 http://mydomain/route1渲染反应组件Component1和 http://mydomain/route2渲染Component2。所以，我以为自然会写下如下的路线： Route name="route1" handler={Component1} Route name="route2" handler={Component2} / /Route DefaultRoute na

我的目标是让 http://mydomain/route1渲染反应组件Component1和 http://mydomain/route2渲染Component2。所以，我以为自然会写下如下的路线：

<Route name="route1" handler={Component1}>
        <Route name="route2" handler={Component2} />
    </Route>

    <DefaultRoute name="home" handler={Home} />
  </Route>

http://mydomain/route1可以按预期的方式工作，但是http://mydomain/route2会渲染Component1。

然后我读了this question，并将路线改为如下：

<Route name="route1" path="route1" handler={Component1} />
    <Route name="route2" path="route1/route2" handler={Component2} />

    <DefaultRoute name="home" handler={Home} />
  </Route>

http://mydomain/route2和http://mydomain/route2都按预期工作。然而，我不明白为什么前者不工作，而它看起来更合乎逻辑，更整洁。

嵌套语法适用于“/”和“route1”，所以为什么不“route1”和“route2”？

问题是在嵌套路由中，路由器将尝试挂接与层次结构匹配的所有组件。当您希望将组件嵌套在彼此之间时，这最适合使用…但是如果您需要两个单独的路由来匹配不同的组件，则它们将需要是自己的路由。

<Route handler={App}>
  <Route path="route1" handler={Component1} />
  <Route path="/route1/route2" handler={Component2} />
  <DefaultRoute name="home" handler={Home} />
</Route>

当URL为/ route1 / route2时，Component2将挂载(在App中)。

如果您想嵌套组件，则需要添加< RouteHandler />到Component1，所以它会使Component2在其中。

原因是因为嵌套组件与嵌套URL不同，路由器可以分开处理。有时您希望组件嵌套，但不一定是URL，反之亦然。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!