Как добавить / удалить новую вкладку в панели навигации при изменении URL? - PullRequest
Новая
       22

Как добавить / удалить новую вкладку в панели навигации при изменении URL?

0 голосов
/ 28 апреля 2019

Новый, чтобы Реагировать.У меня есть компонент React Navbar.js, который будет отображаться на 3 страницах: Landing, Login и Home, но с разными вкладками на каждой странице.

Например, он будет отображать вкладку кнопки входа в систему при посадке, но будет скрыватьна странице входа и на домашней странице будут отображаться окно поиска и кнопка выхода из системы.

Я пытался скрыть значок меню при переходе с целевой страницы на страницу входа, протестировав URL-адрес: 

const opendrawer = (
      <IconButton
        className={classes.menuButton}
        color="inherit"
        aria-label="Open drawer"
      >
        <MenuIcon />
      </IconButton>
    );

 return (
      <div className={classes.root}>
        <AppBar position="static">
          <Toolbar>

{window.location.href.includes("/login") ? null : opendrawer}


            </div>
          </Toolbar>
        </AppBar>

После этого значок меню скрылся, но только когда я обновляю страницу вручную.

1 Ответ

0 голосов
/ 29 апреля 2019

Вы можете использовать реквизиты для этого, создать постоянную информацию о том, какие элементы вы хотите визуализировать этот конкретный значок. Я сделал что-то похожее в своем приложении, я хотел отобразить нижнюю панель только на некоторых страницах:

App.js 

const tasks = {
  task1: {
    bottombar: true,
    // more features you want to turn on or off
  },
  task2: {
    bottombar: false,
  },

// Route is the React Component used for routing,
// Canvas is the component I use to draw the main pages of my app
// the {...props} passes all the feature configuration I previously did
// the module segment I pass the module to render, in this case those two tasks
<Route path="(/task1)" render={(props) => <Canvas {...props} module={tasks.task1} />} />
<Route path="(/task2)" render={(props) => <Canvas {...props} module={tasks.task2} />} />

Canvas.js 

render() {
  return (
     // it will check if the props I passed here is true and render the component 
     // or the feature I want, If it is false, it will render nothing, undefined
     {this.props.module.bottombar ? <BottomBar {...this.props} selectedElement={this.state.selectedElement} /> : undefined}
  );
}
...