React：如何在不渲染 SideBar 组件的情况下打开新页面

Question

我有一个应用程序，侧边栏会指向 3 个不同的页面，所有页面都有导航栏和侧边栏，但是对于下一页，我不想有侧边栏但想涉及导航栏，如何设置路线？

我的渲染函数返回：

<div className="App">
   <div className="header">
      <NavBar />
   </div>

    <div className="body">
      <div className="sidebar">
        <SidebarMenu />
      </div>
      <Router>
        <Switch>
          {routes.map((route, index) => (
                   <Route
                     key={index}
                     path={route.path}
                     exact={route.exact}
                     component={route.main}
                   />
                  ))}

        </Switch>
       </div>
      </Router>
     </div>
   </div>

当我单击上面其中一个子页面中的按钮时，会打开下一页。 我正在使用 window.open('/new_page')。

将博客视为一个博客，我们有带有项目的侧边栏：帖子，......并且在帖子页面中，有一个创建帖子按钮，点击它后，在新窗口中打开一个新页面。

如何在没有默认侧边栏但顶部有导航栏的情况下呈现这个新页面？

谢谢，

Answer 1

使用window.location.pathname 了解路径名，如果您不想显示特定组件，请使用条件渲染：

{(window.location.pathname!=='/new_page')&&<div className="sidebar">
    <SidebarMenu />
  </div>}

如果您已经在使用 react-router，那么您也可以使用 this.props.location 与您通过 highOrderComponent(HOC) withRouter 传递的组件。