nested react router sibling

Question

I've been reading this article: Multiple Nested Routes in react-router-dom v4 and some like it and I can't get my case to work.

Here are 2 REPLs trying each of the methods described in the article - maybe I missed something?

If you can get either of these REPLs to work I'm probably set - but I would prefer the Modularized approach. Thank you for your help.

Modularized into Routes 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>
)

Container around Routes 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>

I have many instances of Pages w/ Subpages. I can get one nested layout to work like but when I try to add as a sibling under the Switch I'm getting when I try to access RouteC. If I switch the OOP I get when I access RouteA.

Falieson · Answer 1 · 2019-03-20T02:34:27.067

This Repl is a working solution: https://codepen.io/anon/pen/ZPMBqY?editors=0010

There were 2 issues which mainly revolve around the idea of understanding Switch. It goes from greatest specificity to least.

Issue 1) make your root path last, its the least specific

Issue 2) make sure exact is false on the parents

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

Issue 3) use switch inside the Module

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

nested react router sibling

1 Answers1