react dom nested route not rendering

Question

I am new to react and I want to do something similar to below;

home
home/pageone
home/pagetwo
other

my App.js has the following;

render() {
    return (
      <Router>
      <div className="App">
       <Header />
          <Switch>
          <Route exact path='/home' component={Homepage} />

          <Route exact path='/other' component={Other} />
          </Switch>

       <Footer />
      </div>
  </Router>
);

My Homepage has the following;

render() {
    return (
    <div class="main-wrap">
      <div class="sidebar">
      <ul>
      <li className="sidebar bar">
              <Link to ={`${this.props.match.path}/pageone`}> pageone</Link>
      </li>
      </div>
      <Route path={`${this.props.match.path}/pageone`} component={PageOne} />
      <Route exact path={`${this.props.match.path}`} component={HomeDefault} />
  </div>
);

It looks like my,

Route exact path={`${this.props.match.path}`} component={HomeDefault} />"

is working perfectly fine. It is showing the component. But,

Route path={`${this.props.match.path}/pageone`} component={PageOne}

is not working at all. I think the problem is probably very basic. I tried to google all day and could not find anything similar.

score 1 · Answer 1 · answered Feb 23 '19 at 20:37

it's because of exact at Route in your root.

<Route exact path='/home' component={Homepage} />

matches /home/ but does not match /home/pageone. So it does not even render Homepage. Remove exact and everything will be fine.

<Route path='/home' component={Homepage} />

react dom nested route not rendering

1 Answers1