Блог

Я разрабатываю целевую страницу с использованием React. Он должен иметь одинаковую панель навигации для всех разделов и изменять только свое активное состояние.

В App.js файл, который я использовал BrowserRouter, который перенаправляет к компоненту навигации. Моя проблема в том, что эта навигация не работает должным образом, она не переключает компоненты, она переключает только путь. Например, когда я нажимаю Cabinet, он должен переключиться с Home на Cabinet component . Должен ли я использовать другой маршрутизатор для навигации или нет? Что было бы лучшим решением для этого?

Я попытался создать компонент NavRouter, в котором я разместил маршрутизаторы для навигации.

App.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>
 

вы можете сделать следующее:

создайте файл с именем 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.

Или: если вы не знакомы с redux, на данный момент вместо имени пути в компоненте навигации вы можете использовать window.location.pathname

Вот способ, которым вам нужно это сделать. Отделите навигацию по заголовкам от других компонентов.

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>