Full React Tutorial #21 - The React Router

hurts to hear a British man say router that way

just in case someone revisits here
router V6

<Routes>
<Route path='/' element={<Home/>}/>
</Routes>

What can I do now?? the current running version of react dom is 18. I googled it?? how do I install it??
can anyone help me???

i have been sitting here for four fucking hours and have copied the code TOO THE T! and it just doesnt work. im fucked

I just love you bro
Why do people pay for courses? If there's such brilliant free tutorials by godsent people like you?
thank you! love frm Ukraine

can you guys tell me whats the font he is using?

As a beginner, React errors are frustratingly not well documented, IMO. My React app blew up after I ran the react-router-dom as described in this video. After a couple days of research, then giving up, then coming back to this video, I think I managed to fix it:
1) Uninstall Node.js on my Windows 11 machine.
2) Reboot
3) Fresh install Node.js 20.2.0
4) react create-app dojo-blog
5) enter dojo-blog folder
6) npm run start
7) npm install react-router-dom@5
8) npm json-server --watch data/db.json --port 8000
...and my app is working without errors.

As you can see, I did things a little out of order, swapping steps 7 & 8. I think the real fix here may have been the newest Node version, 20.n.

Solution if you have problem such as [Home] is not an element or <Route>

import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';

<div className="content">
<Routes>
<Route path="/" element={<Home/>}/>
</Routes>
</div>

Hi All,
All of sudden when I started installing router package in my machine . My npm not working . Throwing me proxy behind error. Although I have deleted proxy details but still facing issue . Can someone help me to fix this issue ?

Many thanks for all your hard work - as a Brit, I can even (just about!) forgive you for pronouncing it 'rowt' instead of 'root'.... We already have to spell 'color' incorrectly, surely there's no need to speak 'US English' as well 🙄🙂

Those who are using react-router-dom v6, please note some syntax change in the routing part-
Switch has been removed and Routes have been introduced in place of that. refer below snippet please

<Router>
<div className="App">
<Navbar />
<div className="content">
<Routes>
<Route exact path="/" element={<Home></Home>}></Route>
<Route
path="/create"
element={<CreateBlog></CreateBlog>}
></Route>
</Routes>
</div>
</div>
</Router>

We've been studying react for the past couple weeks with a test in a couple days. Definitely thought I was going to fail but you've given me hope! Lol. Thank you

Wow ! The first 3 minutes when you explained how react works is just amazing.

Thanks

sweet!

this tutorial doesn't work for me ! idk why ? can somebody help me please ?

Thanks!

For people who want to use react-router-dom v6.X,
Make the import statement:

import { BrowserRouter as Router, Route, Routes} from 'react-router-dom';

and make the JSX:

<Router>
<div className="App">
<Navbar></Navbar>
<div className="content">
<Routes>
<Route path='/' element={ <Home /> } />
</Routes>
</div>
</div>
</Router>

Update for react router 6:
use <Route path='/' element={<Home/>}/> instead of what's in the video
@The Net Ninja kindly pin this comment so that people don't search through the entire comment section for answer. Thank you

Thank you so much!

Thank you so much! I explored a lot websites to learn how to use routes. Finally I found this video. Thank you so much!

it should be noted that starting from react-router-dom v6, <Switch /> has been replaced by <Routes />.

i feel every message should be written differently but over all thank you

A big thank you from Brazil 🇧🇷 !!! Great explanation and demonstration...

thanks you very much from algeria

Thank you so much, I only just started react 2 days ago and you have given a wide grasp of it. You make it so fun

Brilliant tutorial Shaun, very clear voice and you explain everything clearly and easily.....but 'rowt' instead of 'root' for an Englishman!? I assume is for the American audience ;)

Thank you for this Great Series. So much simplified and very well explained.

Thank you! Helped a lot 👍

How do you lazy load component when a route is first activated ?

I am having an error for 'BlogList' Component and i.e. React must be in the scope when using jsx...can anybody tell me why is the happening & how to resolve it..please

this guy sounds like he's from yorkshire

Thankyou very much sir

well explained thank you sir

Nice! For v6 I used this code:

<Router>
<div className="App">
<Navbar />
<div className="content">
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</div>
</div>
</Router>

I got 6 high severity vulnerabilities after installing T_T

I tried doing it with version 5 first and then installed version 6. Still got the same vulnerabilities. Even by using npm audit fix and npm audit fix --force, it's the same. Anyone got a fix or shall i just continue with the tutorial?

This video is beautiful!
Obrigado, brother!
Deus abençoe!

How do i use html in Route ? i can t just put <p><p> in there cus it says that [p] is not a <Route> component

How do you re direct from a function based on sone condition ?

Thank you so much for this video ! It really helped me get a clear understanding of React Router

great video

Sticking with version 5 was smart because version 6 removed Switch for Routes. Thanks for the turorial.

Nice tutorial!

Small update with react-router-dom, Switch is not longer the keyword to place routes inside your application. Instead use Routes.

Now I understand React thanks man :)

for those who are using react-router-dom V6 your code should look like this
<Router>
<Routes>
<Route path='/' element={<Home/>} />
</Routes>
</Router>

Good work as usual !

For V6 of react-router-dom use <Routes> instead of <Switch> and place your componant inside an element attribute

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
<Routes>
<Route path="/" element={<Home />}></Route>

</Routes>

Thank u for ur efforts for building all these great tutorials. Thank u