Full React Tutorial #21 - The React Router

In this React tutorial we'll talk about the React Router & see how to set it up so that we can have multiple 'pages' on our React websites.

🐱‍💻 🐱‍💻 Course Files:

🐱‍👤🐱‍👤 JOIN THE GANG -

🐱‍💻 🐱‍💻 My Udemy Courses:

🐱‍💻 🐱‍💻 Helpful Links:

🐱‍💻 🐱‍💻 Social Links:

[jeremy]

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>

[danujajayasuriya]

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

[neilcartwright]

If there's a better course on React I'd love to see it. Clear, concise, thoroughly brilliant.

[i_am_human_being]

This person makes learning so easy. Specially because the tutorials are of short length.

[effiemmanuel]

This is the best React Crach Course on Youtube ngl!

For react-router-dom V6 you can use something like this:

<React.Fragment>
<div className="App">
<NavBar />

<div className="content">
<Routes>
<Route path='/' element={<Auth />} />
<Route path='/create' element={<Create />} />
</Routes>
</div>
</div>
</React.Fragment>

[darexleon]

Nice! For v6 I used this code:

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

[gabrielenguidanos]

You're the godfather of tutorials. Concise, clear, perfect

[sertacekici]

When I need to learn something about react you add a video about it. Thank you so much

[druludwig]

Thank you for so often explaining the "why" behind what you're doing

[heavydirtysoul]

When I need to learn any new technology about web development I go straight to this channel and check for a tutorial. Most of the times I learn it from here firstly. It is a great channel.

[sueholder]

8:00
explains how a React application is delivered to a client compared to a non-react website. So nice to get that understanding.

[azeezismaila]

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

[martiananomaly]

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>

[michaelcapone]

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

[PrashantAmoli]

Hey Ninja, great tutorial and explanation🙏. I feel like you are the tutor I was searching for all this time on YouTube. Your way of teaching is effective for me and the tutorials are just what I have planned to learn. Keep up the good work👍 and keep updating old tutorials like you you did here with functional programming in React. Super excited to learn a lot from you💯.

[martinrombach]

You're the best introduction I've had on React, out of 4. Good job man, you really know how to teach :)

[Sohanjs]

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

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

Switch has been replaced by Routes and the Routes component requires that its children be either a <Route> or a <React.Fragment>.

In version 6, the element prop is used instead of nesting components directly. The element prop takes the JSX element to render for the specified route.

[raphaelfreitas]

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

[whatnowZA]

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

[andredesantana]

Shaun you are a LEGEND!!! THANK YOU SO MUCH FOR THE AMAZING