如何在React中使用导航切换组件?

问题描述 投票:-1回答:3

我正在使用React开发登录页面。它应该具有所有部分的相同导航栏并仅更改其活动状态。

在App.js文件中,我使用了路由到Navigation组件的BrowserRouter。我的问题是导航不能正常工作,它不切换组件,它只切换路径名。例如,当我按下Cabinet时,它应该从Home切换到Cabinet组件。我应该使用其他路由器进行导航吗?什么是最好的解决方案?

我试图创建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>
javascript reactjs material-ui jsx
3个回答
0
投票

你可以做到以下几点:

创建一个名为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>

注意:要获取当前的pathName,您必须使用像Redux这样的状态管理解决方案。

或者:如果您不熟悉redux,现在可以使用window.location.pathname而不是Navigation组件中的路径名


0
投票

这是你需要做的方法。将标题导航与其他组件分开。

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>

0
投票

我已经通过创建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>
© www.soinside.com 2019 - 2024. All rights reserved.