如何在更改URL时在导航栏中添加/删除新页签？

Question

新的反应。我有一个反应组件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>

在尝试之后，菜单图标确实隐藏了，但只有当我手动刷新页面时才会隐藏。

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