如何使用 React Router 嵌套一些路由？我想保留一个标题组件答案

【问题标题】：How can I use React Router to nest some routes? And I want to keep a header component如何使用 React Router 嵌套一些路由？我想保留一个标题组件
【发布时间】：2019-09-01 04:41:58
【问题描述】：

我在顶部有一个步进器组件，在底部有一个下一步/后退按钮。我想要的只是改变路线，但我想把这两个组件保留在那里。看：

红色矩形内的那个东西是我需要改变的。其余的我想保持原样。

这是迄今为止我在 App.js 中的内容：

const App = () => (
  <ReduxProvider store={store}>
    <Router>
      <div className="App">
        <Navbar />

        <div className="App-container">
          <Route exact path="/signup" component={SignupPage} />
          <Route exact path="/startup-application"
            component={StartupApplication}
          />
        </div>
      </div>
    </Router>
  </ReduxProvider>
);

export default App;

/startup-application 是我想要嵌套其他路线的路线。嵌套的路由会像 -> /startup-application/step-one, /startup-application/step-two 等等。

【问题讨论】：

您需要将路由器放在包含红色部分的组件中
你只想在StartupApplication组件内添加嵌套路由

标签： javascript reactjs ecmascript-6 react-router

【解决方案1】：

您可以将嵌套的Routes 添加到您希望它呈现的组件内。在这里，您要在 StartupApplication 组件内渲染嵌套的 Routes。所以你可以做以下

 function StartupApplication({match}) {
      return (
        <div>
          <h2>StartupApplication</h2>
          <ul>
            <li>
              <Link to={`${match.url}/step-one`}>Step One</Link>
            </li>
            <li>
              <Link to={`${match.url}/step-two`}>Step Two</Link>
            </li>
          </ul>
          // adding the nested routes
          <Route path={`${match.path}/:nestedComponent`} component={StepOne} />
          <Route path={`${match.path}/:nestedComponent`} component={StepTwo} />
        </div>
      );
    }

有关嵌套路由的更多信息，您可以前往source。

【讨论】：