#reactjs #react-router
Вопрос:
Я хочу создать многостраничное приложение в react. У меня есть два сомнения
1-й — > Например, у меня есть 10 страниц , и из них 3 имеют общую навигационную панель, остальные 3 имеют одинаковую и так далее. Я столкнулся с проблемой в части маршрутизации. Как я должен объявить их в app.js учитывая, что у немногих есть общие компоненты…визуализация навигационной панели на основе пути не кажется хорошим вариантом.. Я также подумываю о создании нескольких файлов, содержащих маршруты, но это также не кажется мне хорошим
2-й -> Существует ли метод родитель-потомок, доступный в react для маршрутизации? Я знаю, что это для вю.
Комментарии:
1. «визуализация навигационной панели на основе пути не кажется хорошим вариантом»… Почему?
2. @MB_ Я не знаю, лучше ли использовать пути для небольших компонентов или нет …просто хочу знать лучший альтернативный вариант
3. Я рекомендую прочитать документацию react-маршрутизатора. У вас есть пара разных способов достичь того, чего вы хотите.
Ответ №1:
Определить App.js как показано ниже. В примере у вас может быть 2 разных макета, и вы можете передавать в каждый макет столько дочерних компонентов, сколько захотите. Теперь определите маршруты для FirstCommon и SecondCommon отдельно, и вы можете настроить их в соответствии со своими потребностями. Все дочерние элементы маршрута firstCommon будут похожи на localhost:3000/web/firstCommonChild и localhost:3000/консоль/secondCommonChild и так далее.
render() {
return (
<BrowserRouter>
<Switch>
<Route
path="/console"
render={() => (
<Layout1>
<FirstCommon/>
</Layout1>
)}
/>
<Route
path="/web"
render={() => (
<Layout2>
<SecondCommon />
</Layout2>
)}
/>
<Route component={NotFound} />
</Switch>
</BrowserRouter>
)
}