javascript - 嵌套 react 路由器同级

Question

我一直在读这篇文章: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。

Answer 1

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

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

问题 1)将根路径放在最后，这是最不具体的

问题2)确保 parent 的exact是错误的

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

问题3)在模块内使用开关

// 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>