反应dom嵌套路线不渲染[重复]

Question

这个问题在这里已有答案：

• React Router 4 Nested Routes not rendering 1回答

我是新手做出反应，我想做类似下面的事情;

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}

根本不工作。我认为这个问题可能非常基础。我整天试图谷歌，找不到类似的东西。

Answer 1

这是因为exact在你的根本Route。

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

匹配/home/但与/home/pageone不匹配。所以它甚至没有渲染Homepage。删除exact，一切都会好的。

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