I've set up some routing using react-router which shows the Header, and Navigation Bars (SBNavigtion and SBTemplates) on every page. However, I also have a log-in and register page where I don't want to show the header, etc...
Is it possible to hide the header, and navigation bars on specific pages, or will I have to refactor all pages? Meaning, that I'll have to put the header and nav bars into each page individually so that it doesn't show up anymore on the log-in and register page?
<div className="app">
<BrowserRouter>
<Header />
<div className="app__structure">
<div className="app__structure-sidebar">
<SBNavigation />
<SBTemplates />
</div>
<div className="app__structure-routes">
<Routes>
<Route path="/log-in" element={<LoginPage />} />
<Route path="/register" element={<RegisterPage />} />
<Route path="/loading" element={<LoadingPage />} />
<Route path="/" element={<HomePage />} />
<Route path="/leads" element={<LeadsPage />} />
<Route path="/leads/:id" element={<EditExistingLead />} />
<Route path="/leads/add-new" element={<AddNewLead />} />
<Route path="/templates" element={<TemplatesPage />} />
<Route path="/templates/:id" />
<Route path="/editor" element={<EditorPage />} />
<Route path="/review/:id" element={<ReviewPage />} />
<Route path="/settings/:id" element={<SettingsPage />} />
<Route path="*" element={<NotFoundPage />} />
</Routes>
</div>
</div>
</BrowserRouter>
</div>
