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

1. 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?
2. I need to render conditionally because I don't want it to be on the login page.

Kindly help!!!