React is capable of building amazing single page applications (SPAs), but when you add in React Router as a dependency, React becomes capable of building full website experiences with component routing, browser history, and more. In this tutorial, you will learn how to get started with React Router and set up the routes for our React JS Blog project. If you are just starting out with React, I recommend starting at the beginning of this Learn React tutorial series playlist here: ua-cam.com/play/PL0Zuz27SZ-6PrE9srvEn8nbhOOyxnWXfp.html
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 (
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.
edit: I found a vídeo from Dave with the updates of the entire project >> ua-cam.com/video/XBRLVRjZ3CQ/v-deo.html 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 ={ }" for exemple 2- and in the index add the "" around the "Route", change the component for elements and the ""path='/'" for "path='*'". Hope that this help. 😛
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import { BrowserRouter as Routes, Route } from 'react-router-dom'; ReactDOM.render(
Yeah, it is actualy@@prasannapm3220. I face other error in the folowing tutorials too, and i found a vídeo from Dave that update the entire project. The link: ua-cam.com/video/XBRLVRjZ3CQ/v-deo.html
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.
I'm not sure if there's a better way to handle this but, in order to follow the tutorial, I recommend you install react-router-dom@5 (and then update it) instead of react-router-dom (which will install v6 or whatever version will be current when you read this). This will save you a headache to figure out why there's nothing wrong with your code and yet the app doesn't work...!
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!
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
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
Thank you so much for your React js course! Your tutorials are very understandable and helpful. I am using React to create websites, but to do it quickly we have library called material UI. I would like to see in your channel tutorial for this library. It would be very helpful as a React course addition.
Awsome, you make it easy. Just want to ask could you prevent re-rendering when you back to the previous route. It takes a while when the page comes again even if you don't fetch the data again (for example I don't like to rerender my map container because it takes seconds to put data on the basemap again) Many thanks
You can download my code and compare for differences. Also read some of the comments here about upgrading to React Router v6 or making sure you have the same version of React Router that I used in this video.
I ran into some problem by following the code. The problem seems to lies in . Error message says "A is only ever to be used as the child of element, never rendered directly. Please wrap your in a ." Is it due to changes in the new version? Do you have any suggestion? thanks
Yes, look for the link to the React Router 6 update tutorial in the description or change back to RRv5 for this series and then do the update tutorial.
If my memory is correct,I think there is a project preview at the beginning of this video, and the project starts here. Note: I have published an update on my channel for React Router v6, too.
You can use React v18 with this tutorial series. What has significantly changed is React Router. You can use the package.json file from my source code and type: npm update at the command line to use the npm packages I used... or you can follow my React Router v6 update tutorial here: ua-cam.com/video/XBRLVRjZ3CQ/v-deo.html
There is a link to the updated version tutorial in the description. Look for "After watching this tutorial, go to the refactor update tutorial with React Router version 6"
For people who got error 'Error: A Route is only ever to be used as the child of element, never rendered directly. Please wrap your Route in a Routes.' This is the solution. Add "Routes" and change "component" to "element" import {BrowserRouter as Router, Routes, Route} from 'react-router-dom' ReactDOM.render(
React is capable of building amazing single page applications (SPAs), but when you add in React Router as a dependency, React becomes capable of building full website experiences with component routing, browser history, and more. In this tutorial, you will learn how to get started with React Router and set up the routes for our React JS Blog project. If you are just starting out with React, I recommend starting at the beginning of this Learn React tutorial series playlist here: ua-cam.com/play/PL0Zuz27SZ-6PrE9srvEn8nbhOOyxnWXfp.html
The way you explain everything in such a clear and calm way is truly remarkable!
Thank you so much for this series and all your other videos 👏🏼
You're welcome! 💯🙏
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 (
);
}
export default App;
//index.js
import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';
const container = document.getElementById('root');
const root = createRoot(container);
root.render(
);
Link to updated tutorial for RRv6 (with source code) in the description and right here, too: ua-cam.com/video/XBRLVRjZ3CQ/v-deo.html
Thank you!
Thank you!
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.
I am glad I could help! Keep making progress! 💯🚀
edit: I found a vídeo from Dave with the updates of the entire project >> ua-cam.com/video/XBRLVRjZ3CQ/v-deo.html
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 ={ }" for exemple
2- and in the index add the "" around the "Route", change the component for elements and the ""path='/'" for "path='*'".
Hope that this help. 😛
Still facing error
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter as Routes, Route } from 'react-router-dom';
ReactDOM.render(
,
document.getElementById('root')
);
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 { Route, Routes, useNavigate } from 'react-router-dom';
import { useState, useEffect } from 'react';
import { format } from 'date-fns';
function App() {
const [posts, setPosts] = useState([
{
id: 1,
title: "My First Post",
datetime: "July 01, 2021 11:17:36 AM",
body: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis consequatur expedita, assumenda similique non optio! Modi nesciunt excepturi corrupti atque blanditiis quo nobis, non optio quae possimus illum exercitationem ipsa!"
},
{
id: 2,
title: "My 2nd Post",
datetime: "July 01, 2021 11:17:36 AM",
body: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis consequatur expedita, assumenda similique non optio! Modi nesciunt excepturi corrupti atque blanditiis quo nobis, non optio quae possimus illum exercitationem ipsa!"
},
{
id: 3,
title: "My 3rd Post",
datetime: "July 01, 2021 11:17:36 AM",
body: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis consequatur expedita, assumenda similique non optio! Modi nesciunt excepturi corrupti atque blanditiis quo nobis, non optio quae possimus illum exercitationem ipsa!"
},
{
id: 4,
title: "My Fourth Post",
datetime: "July 01, 2021 11:17:36 AM",
body: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis consequatur expedita, assumenda similique non optio! Modi nesciunt excepturi corrupti atque blanditiis quo nobis, non optio quae possimus illum exercitationem ipsa!"
}
])
const [search, setSearch] = useState('');
const [searchResults, setSearchResults] = useState([]);
const [postTitle, setPostTitle] = useState('');
const [postBody, setPostBody] = useState('');
const navigate = useNavigate();
useEffect(() => {
const filteredResults = posts.filter((post) =>
((post.body).toLowerCase()).includes(search.toLowerCase())
|| ((post.title).toLowerCase()).includes(search.toLowerCase()));
setSearchResults(filteredResults.reverse());
}, [posts, search])
const handleSubmit = (e) => {
e.preventDefault();
const id = posts.length ? posts[posts.length - 1].id + 1 : 1;
const datetime = format(new Date(), 'MMMM dd, yyyy pp');
const newPost = { id, title: postTitle, datetime, body: postBody };
const allPosts = [...posts, newPost];
setPosts(allPosts);
setPostTitle('');
setPostBody('');
navigate.push('/');
}
const handleDelete = (id) => {
const postsList = posts.filter(post => post.id !== id);
setPosts(postsList);
navigate.push('/');
}
return (
);
}
export default App;
Prolly even useHistory is outdated
Yeah, it is actualy@@prasannapm3220. I face other error in the folowing tutorials too, and i found a vídeo from Dave that update the entire project. The link: ua-cam.com/video/XBRLVRjZ3CQ/v-deo.html
Sir your react series is incredible ♥️♥️♥️😊♥️
Thank you! I sincerely appreciate the kind words 🙏
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.
Thank you Dave :)
In react-router-dom version 6 are minimal changes, it is easy to convert the old version to the new.
You're welcome! Update here for RRv6: ua-cam.com/video/XBRLVRjZ3CQ/v-deo.html
nice, haven't seen that :)
I'm not sure if there's a better way to handle this but, in order to follow the tutorial, I recommend you install react-router-dom@5 (and then update it) instead of react-router-dom (which will install v6 or whatever version will be current when you read this). This will save you a headache to figure out why there's nothing wrong with your code and yet the app doesn't work...!
Good suggestion. Also, the RRv6 update tutorial is available: ua-cam.com/video/XBRLVRjZ3CQ/v-deo.html
You are a great teacher! Thank you sir! 🙏
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!
You're welcome Ahmad 🙏 Thank you for always providing feedback 💯
@@DaveGrayTeachesCode I wish I could do more than that.
Regards
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
Thanks for the note! I've heard that, but for some unknown reason, it doesn't work for me. I'll try to find what is preventing it 👍
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
Thanks, yes I heard the new version was just released. I cannot edit an already posted video, but I will do an update sometime.
Thank you very much for this course, you explain very well
You are welcome!
Awesome as always 👍😀
Much appreciated! 💯
very clear , thanks a lot
You are welcome!
Thank you so much for your React js course! Your tutorials are very understandable and helpful. I am using React to create websites, but to do it quickly we have library called material UI. I would like to see in your channel tutorial for this library. It would be very helpful as a React course addition.
Thank you for the request!
Awsome, you make it easy.
Just want to ask could you prevent re-rendering when you back to the previous route. It takes a while when the page comes again even if you don't fetch the data again (for example I don't like to rerender my map container because it takes seconds to put data on the basemap again)
Many thanks
It is beyond the scope of this beginners series, but you may be interested in learning about React.memo: ua-cam.com/video/BlUwu_6rSkw/v-deo.html
Hello, This is a wonderful tutorial, Dave.
Do we have to install react app for every project?
Every project has dependencies. You will need to run (not install) create-react-app using npx for each React project you create.
Thanks Dave.
You're welcome! 🙏
I have followed this code but my output is empty. It is displaying white page what should i do now?
You can download my code and compare for differences. Also read some of the comments here about upgrading to React Router v6 or making sure you have the same version of React Router that I used in this video.
I ran into some problem by following the code. The problem seems to lies in . Error message says "A is only ever to be used as the child of element, never rendered directly. Please wrap your in a ." Is it due to changes in the new version? Do you have any suggestion? thanks
Yes, look for the link to the React Router 6 update tutorial in the description or change back to RRv5 for this series and then do the update tutorial.
@@DaveGrayTeachesCode I see. Thanks! React is changing so fast.
Hi Dave. Where is the beginning of this project? I searched ur React series and couldn’t find it.
If my memory is correct,I think there is a project preview at the beginning of this video, and the project starts here. Note: I have published an update on my channel for React Router v6, too.
@@DaveGrayTeachesCode So u don’t have the videos for the preview?
The preview for this React blog project is at 00:14 of this very video... maybe you are talking about something else?
@@DaveGrayTeachesCode I was thinking you also have the videos showing how the preview is built. Is there a link to the blog project?
@@user121304 as you go through the tutorials, the blog project is built. I usually have resources and a link to github in the description.
Switch is not working, it gives this error: 'Switch' is not exported from 'react-router-dom'
hii i have react 18th version but i need 17.0.2 version how can i get the older version
You can use React v18 with this tutorial series. What has significantly changed is React Router. You can use the package.json file from my source code and type: npm update at the command line to use the npm packages I used... or you can follow my React Router v6 update tutorial here: ua-cam.com/video/XBRLVRjZ3CQ/v-deo.html
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
Correct - link to updated tutorial in the description. Several discussions in the comments 🚀
How to resolve the react hook error?
Link to an updated tutorial for React Router in the description.
This version of router is obsolete.
There is a link to the updated version tutorial in the description. Look for "After watching this tutorial, go to the refactor update tutorial with React Router version 6"
For people who got error 'Error: A Route is only ever to be used as the child of element, never rendered directly. Please wrap your Route in a Routes.' This is the solution.
Add "Routes" and change "component" to "element"
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'
ReactDOM.render(
,
document.getElementById('root')
);
Update to React Router 6 tutorial link in the resources and comments 🚀