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 · Accepted Answer · 2019-03-20 02:34:27Z

1

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>

edited Mar 20, 2019 at 2:34

answered Mar 19, 2019 at 19:38

Falieson

2,6163 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

nested react router sibling

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related