React Router 4嵌套程序

Question

我将首先将我所做的研究联系起来。

• Nested routes with react router v4 - Question
• React Router 4 Documentation
• Why can I not nest Route components in react-router 4.x? - Question
• How to nest routes in React Router v4? - Question
• React Router v4入门 - 流星厨
• A Simple React Router v4 Tutorial
• 警告：您不应该使用和使用相同的路线; <Route children>将被忽略 - teamtreehouse
• React-router-dom v4 nested routes not working - Question

对不起看起来我只能发布2个外部链接。

TL; DR

我在React Router 4中找到了2种嵌套方法，每种方法都有它的优点和缺点。

• 首先。这是react-router团队推荐的方式，优点是Route组件是他们加载的地方，但我发现很难跟踪路由。

• 二。以某种方式管理在一个地方进行所有路由，但是有一些重复的代码和一个不必要的嵌套级别，通过添加一个帮助组件，我也不确定是否可以这样做。

所以这些是我发现嵌套的两种方式。我正在寻找：

• 任何人发现进行路线筑巢的任何其他方式。
• 我该如何筑巢？你觉得哪种方式最好？

从这项研究中我发现了两种嵌套方法，我正在使用react-router-dom。

1。反应路由器文档推荐方式

因此，根据React Router，在同一个文件上执行所有路由都已结束，因此现在应该通过将嵌套路由放在组件中来完成嵌套。

import React from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)

const Topics = () => (
  <div>
   <Route path="/topics/topic" component={Topic}/>
  </div>
)

const Topic = () => (
  <div>
   <h2>One Topic</h2>
  </div>
)

const BasicExample = () => (
  <Router>
    <div>
      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/topics" component={Topics}/>
    </div>
  </Router>
)
export default BasicExample

2。把它放在一个地方。

环顾四周，人们已经找到了在一个文件中完成所有路由的方法，比如我引用的其中一个链接，但是它有一些缺点，例如，使用用户需要的“未找到”页面Switch组件，这很好，但是如果你嵌套你会遇到一些问题，比如必须重复代码。例如，这可行。

2.1第一级嵌套

const MainLayout = ( {children} ) => (
  <div>
    <h2>Main Layout</h2>
    {children}
  </div>
);

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
);

const About = () => (
  <div>
    <h2>About</h2>
  </div>
);

const FirstLevelNesting = () => (
  <Router>
      <MainLayout>
          <Switch>
              <Route exact path="/" component={Home}/>
              <Route path="/about" component={About}/>
              <Route component={NoMatch}/>
          </Switch>
      </MainLayout>
    </div>
  </Router>
);
export default FirstLevelNesting;

2.2二级嵌套

在这里你可以看到如何使用辅助组件在第二级进行嵌套，你不能像第一级那样进行嵌套，方法是将MainLayout之类的组件放在{{1}中。因为当Switch到达它时，它将始终与路径匹配，我们永远不会到达Switch，这就是为什么我们需要使用辅助组件来进行嵌套，然后再在其中组件我们还必须添加NotFound。

NotFound