Есть несколько компонентов (about, skill, story). Мне необходимо рендерить их при клике на Link="/main", как лучше это все организовать? Есть идея создать отдельный компонент MainPage.js импортировать туда все нужные мне компоненты, а затем создать Route component="MainPage". Хотелось бы услышать ваши варианты, спасибо!
1 ответ
Можешь создать отдельный компонент ... Зависит от того чё ты хочешь. С рута, а потом в Mainpage Switch
<Route path = `${match.path}/main_page` component={MainPage} />
<Switch>
<Route path = exact `${match.path}/some_path` component={Component} />
<Route path = exact `${match.path}/some_path2` component={Component2} />
</Switch>
-
Спасибо, попробую. На данный момент я использовал
<Route path="/" exact render={(props) => (<Fragment> <About /> <Skill /> <Experience /> </Fragment> )}/>
17 июн 2020 в 10:46 -
1@Shakhzod Yokubov render не используйте так, у вас же все отрендерится на одной странице, а вы хотите на разных. И Fragment если рассматривать Ваш случай) можно заменить на <> <About>....</> Отметьте вопрос решенным. 17 июн 2020 в 11:27
-
Так мне и нужно было отрендерить <About /> <Skill /> <Experience /> компоненты на одной страничке, а <Projects /> на другой, в итоге у меня вышло
<BrowserRouter> <Header /> <Route path="/" exact render={(props) => ( <Fragment> <About /> <Skill /> <Experience /> </Fragment> )} /> <Route path="/projects" exact component={Projects} /> </BrowserRouter>
18 июн 2020 в 5:27