Как переключать компоненты с помощью навигации в React?
Я разрабатываю целевую страницу с помощью React. Он должен иметь одинаковую панель навигации для всех разделов и изменять только свое активное состояние.
В файле App.js я использовал BrowserRouter, который направляется к компоненту навигации. Моя проблема в том, что эта навигация не работает должным образом, она не переключает компоненты, она переключает только путь. Например, когда я нажимаю «Кабинет», он должен переключаться с компонента «Дом» на компонент «Кабинет». Должен ли я использовать другой маршрутизатор для навигации или нет? Что было бы лучшим решением для этого?
Я попытался создать компонент NavRouter, в котором я разместил маршрутизаторы для навигации.
Файл приложения.js:
<BrowserRouter>
<Switch>
<Route path='/' exact component = { Navigation }></Route>
<Route path='/cabinet' component = { Navigation }></Route>
<Route path='/catalog' component = { Navigation }></Route>
<Route path='/company' component = { Navigation }></Route>
<Route path='/contacts' component = { Navigation }></Route>
</Switch>
</BrowserRouter>
Навигационный файл:
class Navigation extends Component {
render() {
const { classes, location: {pathname}, children } = this.props;
return (
<div>
<MuiThemeProvider theme = {color}>
<Fragment>
<nav id = "menu">
<ul className = "navigation">
<li>
<MenuItem component = {Link} to='/' selected = {'/' === pathname} className = "active menuItem" className = {classes.menuItemColor}>
Главная
</MenuItem>
</li>
<li>
<MenuItem component = {Link} to='/cabinet' selected = {'/cabinet' === pathname} className = "menuItem" className = {classes.menuItemColor}>
Кабинет
</MenuItem>
</li>
<li>
<MenuItem component = {Link} to='/catalog' selected = {'/catalog' === pathname} className = "menuItem" className = {classes.menuItemColor}>
Каталог
</MenuItem>
</li>
<li>
<MenuItem component = {Link} to='/company' selected = {'/company' === pathname } className = "menuItem" className = "">
Компания
</MenuItem>
</li>
<li>
<MenuItem component = {Link} to='/contacts' selected = {'/contacts' === pathname} className = "menuItem" className = "">
Контакты
</MenuItem>
</li>
</ul>
</nav>
<main className = {classes.content}>
{ children }
</main>
</Fragment>
</MuiThemeProvider>
</div>
);
}
}
Файл NavRouter.js:
<BrowserRouter>
<Navigation>
<Switch>
<Route path='/' exact component = { Navigation }></Route>
<Route path='/home' component = { Home }></Route>
</Switch>
</Navigation>
</BrowserRouter>
Потому что если я укажу путь с его компонентами в App.js, он не будет показывать навигацию. Он будет отображать только соответствующие компоненты без навигации. Это проблема
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
вы можете сделать следующее:
создайте файл с именем Routes.js
в Routes.js:
export default () => (
<BrowserRouter>
<Switch>
<Route path='/' exact component = { Home }></Route>
<Route path='/cabinet' component = { Cabinet }></Route>
<Route path='/catalog' component = { Catalog }></Route>
<Route path='/company' component = { Company }></Route>
<Route path='/contacts' component = { Contacts }></Route>
</Switch>
</BrowserRouter>
)
в App.js
import Routes from './Routes';
import Navigation from './Navigation'
//inside render
<Navigation>
<Routes />
</Navigation>
Примечание: чтобы получить текущее имя пути, вы должны использовать решение для управления состоянием, такое как Redux.
Или: если вы не знакомы с редуксом, то пока вместо имени пути в компоненте навигации вы можете использовать window.location.pathname
Выдает ошибку «TypeError: не удается прочитать свойство« путь »неопределенного» в компоненте навигации внутри рендеринга.
Вот способ, которым вам нужно это сделать. Отделите навигацию заголовка от других компонентов.
App.js
<Navigation/>
<BrowserRouter>
<Switch>
<Route path='/' exact component = { Home }></Route>
<Route path='/cabinet' component = { Cabinet }></Route>
<Route path='/catalog' component = { Catalog }></Route>
<Route path='/company' component = { Company }></Route>
<Route path='/contacts' component = { Contacts }></Route>
</Switch>
</BrowserRouter>
Я решил свою проблему, создав файл Root.js, в котором я разместил свои компоненты.
class Root extends Component {
render() {
return (
<div>
<MainNavigation />
<TopNav />
{this.props.children}
</div>
);
}
}
И в файле App.js я поместил это:
<BrowserRouter>
<Root>
<Route path='/' exact component = { Home } />
<Route path='/cabinet' component = { Cabinet } />
<Route path='/catalog' component = { Catalog } />
<Route path='/company' component = { Company } />
<Route path='/contacts' component = { Contacts } />
</Root>
</BrowserRouter>
все ваши маршруты указывают на компонент навигации, я не очень понимаю код, почему бы не указать в Navigation.js каждый путь с его компонентом вместо передачи навигации для всех из них