嵌套反应路由器兄弟

Posted 2023-02-22

【中文标题】嵌套反应路由器兄弟

【英文标题】：nested react router sibling

【发布时间】：2019-08-10 09:40:44

【问题描述】：

我一直在阅读这篇文章：Multiple Nested Routes in react-router-dom v4 和一些喜欢的文章，但我无法让我的案子工作。

这里有 2 个 REPL 尝试了文章中描述的每种方法 - 也许我错过了什么？

如果你能让这些 REPL 中的任何一个工作，我可能已经准备好了 - 但我更喜欢模块化方法。感谢您的帮助。

模块化成路由 https://codepen.io/anon/pen/XGPKwZ?editors=0010

<Router>
  <div className="container">
   <ul>
     <li><Link to="/">Home</Link></li>
     <li><Link to="/about/">About</Link></li>
   </ul>
<hr />

      <Route exact path="/" component=Home />
      <Route exact path="/about" component=About /> 
    </div>
 </Router>

const Home = (children, match) => (
  <div>
    <h1>Home</h1>
    <p>This is the Home Page</p> 
    <li><Link to="/page2">page2</Link></li>
    <li><Link to="/page3">page3</Link></li>
    <hr />

    <Route path=match.path component=Page1 />
    <Route path=`$match.path/page2` component=Page2 />
    <Route path=`$match.path/page3` component=Page3 />
  </div>
)

const About = (children, match) =>(
  <div>
    <h1>About</h1>
    <p>This is about</p>
    <li><Link to="/about/page5">page5</Link></li>
    <li><Link to="/about/page6">page6</Link></li>
    <hr />

    <Route path='/about/' component=Page4 />
    <Route exact path='/about/page5' component=Page5 />
    <Route exact path='/about/page6' component=Page6 />
  </div>
)

路由周围的容器 https://codepen.io/anon/pen/zbJqXK?editors=0011

 <div className="container">
  <Router>
    <Switch>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about/">About</Link></li>
        </ul>
      <Home>
        <Route component=( match ) =>
          <div>
            <Route exact path='/' component=Page1 />
            <Route path='/page2' component=Page2 />
            <Route path='/page3' component=Page3 />
          </div>
        />
      </Home>
      <About>
        <Route component=( match ) =>
          <div>
            <Route path='/about/' component=Page4 />
            <Route path='/about/page5' component=Page5 />
            <Route path='/about/page6' component=Page6 />
          </div>
        />
      </About>
    </Switch>
  </Router>
  </div>

我有很多带有子页面的页面实例。我可以让一个嵌套布局像这样工作，但是当我尝试在 Switch 下添加同级时，我在尝试访问 RouteC 时得到了。如果我切换访问 RouteA 时得到的 OOP。

【参考方案1】：

此 Repl 是一个可行的解决方案：https://codepen.io/anon/pen/ZPMBqY?editors=0010

有两个问题主要围绕理解 Switch 的想法展开。它从最大的特异性到最小的特异性。

问题 1) 让你的根路径最后，它是最不具体的

问题 2) 确保父母的确切是错误的

<Switch>
  <Route  path="/about" component=About /> 
  <Route  path="/" component=Home />
</Switch>

问题3）在Module内部使用switch

// Home
<Switch>
  <Route exact path='/' component=Page1 />
  <Route exact path='/page2' component=Page2 />
  <Route exact path='/page3' component=Page3 />
</Switch>

// About
<Switch>
  <Route path='/about/page5' component=Page5 />
  <Route path='/about/page6' component=Page6 />
  <Route path='/about/' component=Page4 />
</Switch>