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与通过higherOrderComponent（HOC）withRouter传递的组件一起使用。

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

1 个答案: