I'm trying to create a web app. The app has a Home page, About, FAQ & Grow page. The Navbar will render on the pages above. I do not want it to render on my authentication pages - Login & Register Here is my Index.js:
ReactDOM.render(
<>
<Router>
<App />
<Route exact path="/register" component={Register} />
</Router>
</>,
document.getElementById("root")
);); Here is my App.js:
function App() {
return (
<>
<Nav />
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
<Route exact path="/faq" component={FAQs} />
</>
);
}
export default App;How do I render the Nav component on the home page, about and FAQ page and not on my Authentication pages
The easiest and viable option is to include the Nav on each of the components that needs it. i.e. Put it inside Home, about and faq pages respectively.