4

我将从链接我所做的研究开始。

很抱歉，我似乎只能发布 2 个外部链接。

TL;博士

我发现了两种在 React Router 4 中进行嵌套的方法，每种方法都有其优点和缺点。

  • 第一的。这react-router是团队推荐的方式，优点是Route组件在它们加载的位置，但我发现很难跟踪路由。

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

所以这是我发现的两种嵌套方法。我在找：

  • 任何其他人发现做路由嵌套的方法。
  • 我应该如何筑巢？你认为哪种方式最好？

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

1. React Router Docs 推荐方式

所以根据 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放在内部，Switch因为当Switch到达它时，它将始终匹配路径，我们永远不会到达NotFound，这就是为什么我们需要使用辅助组件来进行嵌套，然后在该组件内部我们还必须添加一个NotFound.

const NestedRoutes = () => (
    <div>
        <h2>This is my next nest</h2>
        <Switch>
            <Route exact path='/nextnest' component={Nest}/>
            <Route path='/nextnest/about' component={NestAbout}/>
            <Route component={NoMatch}/>
        </Switch>
    </div>
)

const SecondLevelNesting = () => (
  <Router>
      <MainLayout>
          <Switch>
              <Route exact path="/" component={Home}/>
              <Route path="/about" component={About}/>
              <Route path="/nextnest" component={NestedRoutes}
              <Route component={NoMatch}/>
          </Switch>
      </MainLayout>
    </div>
  </Router>
);
4

0 回答 0