Попытка использовать несколько компонентов для одного пути
Я работаю над приложением для реагирования, и у меня есть несколько компонентов, которые я хочу использовать в моем корневом пути. Интересно, каковы наилучшие методы рендеринга одного компонента и последующего связывания этого компонента с моим корневым каталогом, или могу ли я добавить все компоненты в свой корневой путь.
Я хочу добавить еще 3 компонента в корневой путь.
Это мой файл app.js:
import React, { Component } from "react";
import { BrowserRouter, Route } from "react-router-dom";
import Header from "./components/Header";
import EyewearTitle from "./components/EyewearTitle";
import Buy from "./components/Buy";
import './App.css';
class App extends Component {
render() {
return (
<BrowserRouter>
<div>
<Header />
<Route exact path = "/" component = {EyewearTitle} />
<Route exact path = "/buy" component = {Buy} />
</div>
</BrowserRouter>
);
}
}
export default App;
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы должны добавить все компоненты, которые хотите визуализировать, в один компонент. Например, я мог бы использовать компонент <ShoppingScreen/> и на этом экране отобразить:
render() {
return(
<div className = "shopping-screen">
<ShoppingScreenSideBar/>
<ShoppingScreenItems/>
</div>
);
}
Хорошо, да, я подумал, что это будет лучше, просто не был уверен. Тогда я бы хотел использовать этот компонент в моем корневом пути, верно?
Да так бы выглядело <Route exact path = "/" component = {ParentComponent} />
Потрясающие! Большое спасибо за помощь в прояснении этого вопроса. ^ _ ^ v
Говоря «корневой путь», вы имеете в виду компонент EyewearTitle? Вы хотите использовать эти несколько компонентов?