How can I conditionally render my Header above this.props.children?

Asked May 12 '22 at 07:53

Active May 12 '22 at 08:01

Viewed 109 times

This is my app.js where all the routes

<Layout>
      <Router>
        <Routes>
          <Route exact path="/" element={<Home />} />
          <Route element={<PrivateRoute />}>
            <Route exact path="/dashboard" element={<Dashboard />} />
            <Route exact path="/video" element={<Video />} />]
          </Route>
          <Route exact path="/login" element={<Login />} />
       </Routes>
      </Router>
</Layout>

This is my loyout component

export default class Layout extends Component {
  render() {
    return (
      <div>
        <Router>
          <Header />
        </Router>
        {this.props.children}
      </div>
    );
  }
}

So I have two questions

I could able to use useNavigate in Header since it was not in the surrounded with the <Router> but after using it is working. So is there any better way of doing this?
I need to render conditionally because I don't want it to be on the login page.

Kindly help!!!

edited May 12 '22 at 08:01

Drew Reese

165,259
14
153
181

asked May 12 '22 at 07:53

Profer

Move the `Header` component into the same router rendering the routes. Use layout routes to conditionally render UI element with specific routes. – Drew Reese May 12 '22 at 07:57
@DrewReese thanks but I tried it did not work. – Profer May 12 '22 at 09:30
Can you clarify what exactly was tried, and didn't work? – Drew Reese May 12 '22 at 21:43
@DrewReese ok this works thanks... but what if I need to remove header from some of the pages after login? – Profer May 16 '22 at 07:27
You would use a layout route to conditionally render the `Header` component with the routes you want it to be rendered with. – Drew Reese May 16 '22 at 07:29
@DrewReese If you can share any link to refer this? – Profer May 16 '22 at 07:34
1

See [Layout Routes](https://reactrouter.com/docs/en/v6/getting-started/concepts#layout-routes). – Drew Reese May 16 '22 at 07:35

How can I conditionally render my Header above this.props.children?

0 Answers0