嵌套反应路由器兄弟

Question

我一直在读这篇文章：多嵌套路由反应路由器多姆v4和一些喜欢它，我不能让我的情况下工作。

这里有两个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>

我有许多页的实例w/Subpage.我可以得到一个嵌套布局的工作方式，但当我试图添加作为一个兄弟姐妹下的交换机我得到当我试图访问RouteC.如果我在访问RouteA时切换OOP。

Answer 1

这个Repl是一个工作解决方案：https://codepen.io/anon/pen/ZPMBqY?editors=0010

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

问题1）将根路径设置为最后一个，这是最不具体的

问题2）确保家长的“精确”为假

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