Вложенный маршрут React dom не отображается

Я новичок в реагировании и хочу сделать что-то похожее на приведенное ниже;

home
home/pageone
home/pagetwo
other

мой App.js имеет следующее;

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

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

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

Моя домашняя страница имеет следующее;

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>
);

Похоже на мой,

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

работает отлично. Он показывает компонент. Но,

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

вообще не работает. Я думаю, что проблема, вероятно, очень проста. Целый день пытался гуглить и ничего похожего не нашел.