Learn React Router with a Beginners Project | Learn React JS

In this tutorial, you will learn React Router with a beginners project. React JS is capable of making amazing single page applications (SPAs), but with React Router, React can build complete websites!

🚀 This lesson is part of a Learn React tutorial series playlist:

After watching this tutorial, go to the refactor update tutorial with React Router version 6:

Learn React Router with a Beginners Project

(00:00) Intro
(00:05) Welcome
(00:14) Project Preview
(01:18) Quick Setup Guide
(03:13) Wrapping the App component in React Router
(04:42) Identifying all of the components
(08:04) Creating the functional components
(12:36) Placing the components in JSX
(13:49) Adding routes for the components

🔗 React Router:

🔗 JSON-Server:

🔗 ES7 React JS Snippets Extension for VS Code:

🔗 React Dev Tools Extension for Chrome:


📚 References:

✅ Follow Me:

Was this tutorial about React Router helpful? If so, please share. Let me know your thoughts in the comments.

#learn #react #router

[skillkrio]

Dave tbh I wake up in the middle of night and thinking about you that you saved me from ud**y tutorial hell. I purchased 52+ hours javascript course and even spent 6 months to complete it but in the end i am not capable of building anything it's full of theory slides. I had almost wasted 1.5 years keep on learning html css javascript never attempted to learn react because i thought i need to master it before learning it. Now it makes sense what you keep on telling everytime "Progress over perfection". If i would have found you i would be a mern developer a year before itself. Now in the journey of react. Regretting of the time that i had wasted.

[kennethmatovu]

Slightly different implementation in react V6...
// App.js
import Header from './Header';
import Nav from './Nav';
import Footer from './Footer';
import Home from './Home';
import NewPost from './NewPost';
import PostPage from './PostPage';
import About from './About';
import Missing from './Missing';
import {
BrowserRouter as Router,
Route,
Routes,
useHistory,
} from 'react-router-dom';

import { useState, useEffect } from 'react';

function App() {
return (
<div className="App">
<Router>
<Header />

<Nav />
<Routes>
<Route path="/" element={<Home />} />

<Route path="/post" element={<NewPost />} />

<Route path="/post/:id" element={<PostPage />} />

<Route path="/about" element={<About />} />

<Route path="*" element={<Missing />} />
</Routes>
<Footer />
</Router>
</div>
);
}

export default App;


//index.js

import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';

const container =
const root = createRoot(container);

root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

[ArujiChipps]

First, thank you Prof.Dave for the amazing series. 😁
Second, if you guys are trying to do this tutorial and are using the React Router v6 (2023), you will need to change some things:
1- Change "Switch" for "Routes", with the 's', because the "Switch" is removed from the library. For adapting the "Routes" you just have to change "component = {Home}" for "element ={ <Home />}" for exemple
2- and in the index add the "<Routes>" around the "Route", change the component for elements and the ""path='/'" for "path='*'".
Hope that this help. 😛

[World_information]

Sir your react series is incredible ♥️♥️♥️😊♥️

[murkyhawk]

In case it helps anyone else:

Feb 2024, and it looks like using the router install command in this video installs the latest (v6) router version, which no longer works with this video's instructions. Dave now has a video on updating the project he builds in this tutorial. But if you just want to follow along with exactly what's in this tutorial series, use this instead of the router install command in the video:

npm i react-router-dom@^5.2.0 -S

This will install the version Dave is using in the video. After following along with all of the videos to build this project, you can then go through the new router update video.

[kubraatalay]

Thank you Dave :)
In react-router-dom version 6 are minimal changes, it is easy to convert the old version to the new.

[multtasker]

You are a great teacher! Thank you sir! 🙏

[ahmad-murery]

That was very easy to understand although I've got confused about the different between using the Route's component property vs surrounding the component itself with a Route,
I turns out that I didn't listen carefully when you mentioned that we can specify the Route's component for components we don't expect to pass props to,

Thanks Dave!

[RavinderSingh-oxyu]

Thanks Dave! It is really helpful to me being back-end developer/architect, your explanation made it easy to understand :). Though, i was trying some hands on, there is a bit change in react-router-dom version 5 and version 6. If you get chance, please try to align your example with latest version 6.
Thanks in advance !.
Regards
Ravinder Singh

[TheMelcool]

Hello! Thanks for the videos. Great Job. You can type the 'rafce' directly in to the editor and it will generate the function component, no need to open the command palete

[leonelcontreras]

Thank you very much for this course, you explain very well

[dikshitsai]

I have followed this code but my output is empty. It is displaying white page what should i do now?

[ayinde_xyz]

Hello, This is a wonderful tutorial, Dave.
Do we have to install react app for every project?

[najibulrehmanmulik]

Switch is not working, it gives this error: 'Switch' is not exported from 'react-router-dom'

[user]

Hi Dave. Where is the beginning of this project? I searched ur React series and couldn’t find it.

[jiweihe]

I ran into some problem by following the code. The problem seems to lies in <Router> <Route path="/" component={App} /></Router>. Error message says "A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>." Is it due to changes in the new version? Do you have any suggestion? thanks

[ramusubbu]

React-router-dom syntax have changed! Route must be placed inside routes. In Route tag component must be replaced by element. This is what I faced

[dikshitsai]

hii i have react 18th version but i need 17.0.2 version how can i get the older version