By - GreatStack

React Router Complete Tutorial | React Routing For Beginners | React Router DOM Tutorial

React Router Complete Tutorial | React Routing For Beginners | React Router DOM Tutorial

GreatStack

0 mins
7932+ students

📝 About This Course

Learn Complete React Router in one Tutorial | React Routing For Beginners | React Router DOM Tutorial Step by step explained with example #ReactJS #ReactRouter 👉 React JS Beginners Tutorial: https://youtu.be/gbAdFfSdtQ4 👉 All React Hooks Tutorial: https://youtu.be/6wf5dIrryoQ SUBSCRIBE: @GreatStackDev In this single tutorial we will learn complete React Router. We’ll cover everything you need to build a fully-functional, multi-page React application using React Router DOM. First we will learn, How to create routing in a React application, so you can easily navigate between different pages, then We’ll explore the Link and NavLink tags, plus the useNavigate hook, to navigate users on mouse click event. After that we will learn how to make nested routes in react js application. Then, we’ll set up a custom 404 page to handle any routes that don’t exist. I’ll show you how to add a Loader in React Router, so that we can load the component data before rendering the component. After that we will learn about route parameters and dynamic routing so that we can display dynamic data on the same component using route parameters. And lastly, we’ll discuss how to use the Error Element to handle any errors that might pop up during navigation. In this React Router complete tutorial we will learn What is React Router and how to create routes in React App Difference between Link and NavLink tag Create Navigation using useNavigate hook Nested routes in React JS React JS Route parameters / Dynamic routing in React Js React Router Loader Create custom 404 page using React Router Handle route error using Route Error element -------------------------- Recommended React Tutorial: Watch Full Stack Food Order Website Tutorial: 👉 https://youtu.be/DBMPXJJfQEA Watch Full Stack E-commerce Website tutorial: 👉 https://youtu.be/y99YgaQjgx4 ------------------------------ Suggested Course: Complete JavaScript course with 30 projects: 👉 https://greatstack.dev/go/javascript-course/ Complete HTML and CSS with 8 projects: 👉 https://greatstack.dev/go/html-css-course ------------------------------ Timestamp: 00:00 Course Overview 01:38 Create basic react project 04:32 What is Page routing 05:53 What is React Router 07:26 Create Routing in React App 30:26 New method to create Create Router 38:44 Difference between Link and NavLink 44:09 Routing using useNavigate Hook 50:04 Nested Routes in React JS 01:00:04 Create 404 page using react router 01:05:06 React Router Loader 01:19:46 Route Parameters and Dynamic Routing in React Js 01:36:16 React Router Error Element ------------------------------------- Recommended Videos: Beginner's HTML and CSS tutorial: ► https://www.youtube.com/playlist?list=PLjwm_8O3suyO2gdXdWHKgM-mO2Y251zzU Beginner's JavaScript tutorial: ► https://youtu.be/Pyv0tMm5i_w Make A Complete Website for college using HTML & CSS: ► https://www.youtube.com/playlist?list=PLjwm_8O3suyP5kGKmwS_DM0Hs1j7fshi5 How to make a Business website step by step: ► https://www.youtube.com/watch?v=99vHH_6F0Ko How to make personal resume website step by step: ► https://www.youtube.com/watch?v=qCFN8EujbGI How to make fitness website design using HTML CSS: ► https://www.youtube.com/watch?v=4bPABX-jOko How to make an Ecommerce Website Design: ► https://www.youtube.com/playlist?list=PLjwm_8O3suyM_2Lo9aAIw3HqjOPor8j9g How to make a Job Portal website design with HTML & CSS: ► https://www.youtube.com/watch?v=cHgx8a-eBDQ How to make travel website design with HTML CSS Bootstrap: ► https://www.youtube.com/watch?v=AiaEqc9UMf8 ------------------------------------- Connect with me: 👉 https://linktr.ee/iamavinashkr Connect with GreatStack: Instagram: https://instagram.com/GreatStackDev Twitter: https://twitter.com/GreatStackDev Facebook: https://facebook.com/GreatStack

🚀 What You'll Learn

Complete understanding of the topic

Hands-on practical knowledge

Real-world examples and use cases

Industry best practices

Premium

Get Full Course Access

Take your learning to the next level with premium features

Unlimited access to all chapters
Interactive quizzes & assessments
Downloadable certificate