CODEWITHSUNDEEP
javascriptreactjsreact-router
Jie Hu
Jie Hu

Reputation: 539

React: how to open a new page without render SideBar component

I have an app, the sidebar will lead to 3 different pages, all of which have nav bar and side bar, however, for the next page, I don't want to have the side bar but want to involve nav bar, how to set up the routes?

My render function returns:

<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>

The next page is opened when I click a button in one of the children pages above. and I'm using window.open('/new_page').

Think as a blog, we have sidebar with items: posts, ... and in posts page, there's a create post button, after click it, a new page open in new window.

How to render this new page without default sidebar but with Nav bar at top?

Thanks,

Upvotes: 0

Views: 2270

Answers (1)

aravind_reddy
aravind_reddy

Reputation: 5486

use window.location.pathname to know the pathname and use conditional rendering if you don't want to display a particular component something like this:

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

if you are already using react-router then you can also use this.props.location with you component passed through higherOrderComponent(HOC) withRouter.

Upvotes: 3

Related Questions