Different forms of navigation on different pages | non-global navigation

Question

I currently have a homepage, where I would like to have a sidebar featuring Home, Login, SignUp.

I have a login and sign up page, where I want a regular navbar for which I have right now.

Currently, as I am building the framework for my app, the regular navbar is currently global.

How can make this unglobal, and specify the pages I want the navbar on? As I would like it removed from my homepage so I can build the sidebar accordingly.

App.Js

  return (
    <div className="App">
      <nav className="navbar navbar-expand-lg navbar-light fixed-top">
        <div className="container">
        <Link to = '/'> 
  <div>
    <img src ={Logo} alt='Logo' className='Logo'/>
  </div>
</Link>          <div className="collapse navbar-collapse" id="navbarTogglerDemo02">
            <ul className="navbar-nav ml-auto">
              <li className="nav-item">
                <Link className="nav-link" to={"/sign-in"}>Login</Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to={"/sign-up"}>Sign up</Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <div className="auth-wrapper">
        <div className="auth-inner">
          <Routes>
            <Route path='/' element={<Home />} /> // components on element prop
            <Route path="/sign-in" element={<Login />} />
            <Route path="/sign-up" element={<SignUp />} />
          </Routes>
        </div>
      </div>
    </div>
  );
}
export default App;

Home

    render() {
        return (
          <div style={{ display: "flex" }}>
            <Sidebar />
            <h1>Sidebar page</h1>
          </div>
        );
      }
    }

Sidebar

//sidebar.js
import React, { Component } from "react";
export default class Sidebar extends Component {
  render() {
    return (
      <div className="sidebar-container">
        <div className="sidebar">
          <a className="sidebar-link">Link</a>
          <a className="sidebar-link">Link</a>
          <a className="sidebar-link">Link</a>
        </div>
      </div>
    );
  }
}