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时就会得到。如果我切换OOP，则在访问RouteA时会得到提示。

Answer 1

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

有2个问题主要围绕了解Switch的思想。它从最大的特异性到最小的特异性。

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

嵌套的反应路由器兄弟

1 个答案: