Как я могу использовать React Router для вложения некоторых маршрутов? И я хочу сохранить заголовок компонента

Question

У меня есть шаговый компонент вверху и кнопка перехода назад / назад внизу.Все, что я хочу, это изменить маршрут, но я хочу сохранить эти 2 компонента там.Посмотрите:

Эта вещь в красном прямоугольнике - это то, что мне нужно изменить.Я хочу, чтобы все остальное было таким, какое оно есть.

Это то, что у меня есть в 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 и т. Д.

Answer 1

Вы можете добавить вложенный Routes внутри компонента, где вы хотите его визуализировать.Здесь вы хотите визуализировать вложенный Routes внутри компонента StartupApplication.поэтому вы можете выполнить следующие действия:

 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 .