更改 URL 时如何在导航栏中添加/删除新选项卡？答案

【问题标题】：How to add/delete new tab in navbar when changing URL?更改 URL 时如何在导航栏中添加/删除新选项卡？
【发布时间】：2019-09-17 13:06:58
【问题描述】：

React 新手。我有一个 React 组件 Navbar.js 将显示在 3 个页面中：登陆、登录和主页，但每个页面中都有不同的选项卡。

例如，它会在登陆时显示登录按钮选项卡，但会隐藏在登录页面中，在主页中会显示搜索框和注销按钮。

我试图通过对 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>

尝试此操作后，菜单图标确实隐藏了，但仅在我手动刷新页面时才隐藏。

【问题讨论】：

标签： reactjs react-router material-ui

【解决方案1】：

您可以为此使用道具，创建一个常量来通知您要呈现此特定图标的元素。我在我的应用程序上做了类似的事情，我只想在某些页面中呈现底栏：

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}
  );
}

【讨论】：