Question

我是新来的反应者，我想做以下类似的事情；

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}

根本不起作用。我认为这个问题可能是非常基本的。我整天试图通过Google进行搜索，找不到类似的内容。

Answer 1

这是因为您的根exact中的Route。

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

匹配/home/，但不匹配/home/pageone。因此，它甚至不呈现Homepage。删除exact，一切都会好起来。

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

反应dom嵌套路由未呈现

1 个答案: