CODEWITHSUNDEEP
javascriptreactjsreact-router-v4
Falieson
Falieson

Reputation: 2556

nested react router sibling

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.

Upvotes: 0

Views: 928

Answers (1)

Falieson
Falieson

Reputation: 2556

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>

Upvotes: 1

Related Questions