How to Create a Navbar using React Router - 2023

In this tutorial, I'll be creating a navbar using the react router library.

[cristineeross]

Thanks so much! I hope you'll reach your Youtube goals! You made the same mistakes as I did, which is kinda cool, so please keep making mistakes, we (beginners) benefit so much from seeing them fixed.

[vinnymurphy]

Thanks for uploading this! I'm working on a project for college and found this information massively helpful.

[sarahsarahhh]

I was understanding everything till you used the bootstrap got kinda lost. Can't I just add a lu and li elements then inside it a list or smthg? I'm still a beginner so this is kinda too advanced for me. I understood the logic behind routes but at minute 8:55 got lost

[omarramo]

THANK YOU SO MUCH!!!! SAVED MY PROJECT!

[MateValtr]

This is an incorrect usage of React Router, and it kind of misses the whole point of using React if you use <a href=""> for page navigation.

The correct way is to import <Link> from "react-router-dom" and use that component for navigation.

[IcedCupcakes]

Shouldn't you import navbar in app.js instead of in every page??

[AchyutJagini]

will this work react router version 6.9.1-

[AchyutJagini]

what version of react router you are using

[AchyutJagini]

import { lazy, Suspense } from "react";
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
import * as ROUTES from './constants/routes'


const

function App() {
return (
<Router>
<Suspense fallback={<p>Loading ...</p>}>
<Routes>
<Route path={ROUTES.LOGIN} element={Login}></Route>

{/* <Route path="/login" element={Login}></Route>*/}
</Routes>
</Suspense>
</Router>
);
}

export default App;I'm getting no output in localhost:3000/login pls help

[EventLoopHero]

The main goal of React is to create a Single Page Application and your video just ruin this concept because you just creates links that links you to another page and reloading it. Instead you should use NavLink or Link method from react-router-dom to resolve this reloading and make you application with single page app concept. Peace ✌