我有一个带有react-router v4 的组件到另一个组件，我想在第二个组件中添加另一个路由。

这是主要路线：

const Dashboard = () => {
  return (
    <div>
      <Header/>
      <Router>
        <div>
          <Route path="/" exact component={Wall} />
          <Route path="/challenge/:id" component={Challenge} />
        </div>
      </Router>
    </div>
  )
}

这是挑战组件：

class Challenge extends Component {
  ...

  render() {
    return (
      ...
        <Router>
          <div>
            <Route path="/overview" exact component={Overview} />
            <Route path="/discussions" exact component={Discussions} />
          </div>
        </Router>
      ...
    )
  }
}

这对我不起作用..

唯一有效的选项是在挑战组件中包含 /challenge/:id ：

<Route path="/challenge/:id/overview" exact component={Overview} />
<Route path="/challenge/:id/discussions" exact component={Discussions} />

最后，我想让路线看起来像这样，例如：

www.site.com/challenge/1/overview

www.site.com/challenge/1/discussions

但不包含每个嵌套路由中的完整路由。