Как я могу использовать React Router для вложения некоторых маршрутов? И я хочу сохранить компонент заголовка
У меня есть шаговый компонент вверху и кнопка «Далее/назад» внизу. Все, что я хочу, это изменить маршрут, но я хочу сохранить эти 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 и так далее.
Вы просто хотите добавить вложенные маршруты внутри компонента StartupApplication
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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>
);
}
Для получения дополнительной информации о вложенных маршрутах вы можете перейти к источник.
Вам нужно будет поместить свой маршрутизатор в компонент, который содержит этот раздел красного цвета.