React JS Tutorial - 14 - React Router and Multiple Pages in React for Beginners | Add Pages in React

Подписаться 17 тыс.

Просмотров 104 тыс.

50% 1

In this tutorial, I'm going to teach you how to install React Router Dom in your react application. Then, you'll learn how to integrate React Router V6 to add pages to your react project. This is a hand-on and real-world tutorial, so you can apply this knowledge to your real-world React application. Also, we will learn about how to create a layout for React applications. In sum, this tutorial will focus on how to set up multiple pages for a React single page application.
React Tutorial for Beginners:
Ep1. How to Install React on Windows 10 - • React JS Tutorial - 1 ...
Ep2. How to Remove Default Files and Create a First Component in React - • React JS Tutorial - 2 ...
Ep3. Basic Variables in React - • React JS Tutorial - 3 ...
Ep4. Basic Props in React for Beginners - • React JS Tutorial - 4 ...
React JS Tutorial - 5 - Inline CSS in React for Beginners - • React JS Tutorial - 5 ...
React JS Tutorial - 6 - React JS Tutorial - 6 - CSS Stylesheet in React for Beginners - • React JS Tutorial - 6 ...
React JS Tutorial - 7 - CSS Modules in React for Beginners - • React JS Tutorial - 7 ...
React JS Tutorial - 8 - Create and Style Navbar in React for Beginners - • React JS Tutorial - 8 ...
React JS Tutorial - 9 - Basic Events in React for Beginners - • React JS Tutorial - 9 ...
React JS Tutorial - 10 - Form and Input Field in React for Beginners - • React JS Tutorial - 10...
React JS Tutorial - 11 - Lists and Map in React for Beginners - • React JS Tutorial - 11...
React JS Tutorial - 12 - Remove an Item from an Array List in React for Beginners - • React JS Tutorial - 12...
React JS Tutorial - 13 -Conditionals and If Statement in React for Beginners - • React JS Tutorial - 13...
React JS Tutorial - 14 - React Router and Multiple Pages in React for Beginners - • React JS Tutorial - 14...

Опубликовано:

21 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 120

@user-fg2yu1de1e Год назад

I am a new React learner in a real project of my company I'm stuck with page link many long time , and I'm appreciated for you. Thank you.

@Devtamin Год назад

Glad it was helpful!

@mohammadamiri1309 3 месяца назад

This is very easily And I And I learned about the pages link from this tutorial

@idocoding2003 11 месяцев назад

I learned much more than any other video😂😂😂. You are the real gigachad 🗿

@Devtamin 10 месяцев назад

Thank you for a comment

@onyekachiebiringa2918 Год назад

Thank youuuu 😭 so much...wish RU-vid has a Love reaction button...your video just helped me scale through a huge roadblock right now.. thanks 🙏

@Devtamin Год назад

You're so welcome! Please, subscribe

@kaddzio2787 9 месяцев назад

From today I am your a new student thanks video was very helpful😊😊

@Devtamin 9 месяцев назад

Glad it was helpful!

@uchihamadara7248 Год назад

fuck i love how you go to the website and teach this man i love what you did. I couldnt understand how other guys in youtube were writing these codes made me feel so unconfident while learning this. I hope you teach all of the other things in this style sir subbing to you

@Devtamin Год назад

I really appreciate your comment. Please, subscribe

@uchihamadara7248 Год назад

@@Devtamin done sir

@derbytm3488 Год назад

the best tutorial on this so far, thanks Sanee

@Devtamin 11 месяцев назад

You're very welcome!

@shrutilenka1420 Год назад

thanks a lot sir..when the youtube videos getting highest likes and views couldn't help me,ur one help me tackle the issue.huge respect sir

@Devtamin Год назад

You're welcome. Please, subscribe

@mindylee5023 5 месяцев назад

Thank you so much. This video is very helpful and ease to understand!

@Devtamin 5 месяцев назад

Glad it was helpful!

@KalmanWebDesign Год назад

I love the miter saw in the background. 🤣

@armaan73 Год назад

Amazing tutorial. I am new to react and this helps me a lot

@Devtamin Год назад

Glad to hear it! Please, subscribe

@revwrapz8279 Год назад

legend thank you, fighting a dapp id been using li on could not work out hwo to integrate this correctly for the life of me haha thank you so much

@Devtamin Год назад

Glad it helped! I really appreciate your comment. Pls, subscribe

@boymatin5845 Год назад

Much better if we already knew how you made the Navbar, starting from the scratch and making something simpler could be easier to understand!

@Devtamin Год назад

This video is 14th. if you want to make Navbar, you can go to the playlist and watch previous videos. I hope it helps. Please, subscribe

@boymatin5845 Год назад

@@Devtamin cool, Yes, subscribed, excited to see new stuff😎

@Design_Fix 4 месяца назад

Thanks @Devtamin, you have a real vitamin-Dev

@Devtamin 4 месяца назад

Thank you

@chukwuogorchinwe3901 Год назад

thankyouu!!!! you just saved me from all the headache i was having

@Devtamin Год назад

Glad I could help!

@shadrack3370 Месяц назад

i loved it again

@Devtamin Месяц назад

thank you for a comment

@shadrack3370 29 дней назад

@@Devtamin how can i change the css of the link in a css file. i tried : .user link{ border: yellow solid 1px; } and jsx: hello

@victoriaojo3762 11 месяцев назад

This is a huge, huge help. Thank you so much.

@Devtamin 11 месяцев назад

Glad it was helpful

@fokspoks Год назад

thanks, man, finally some Route way that fits to my proj

@Devtamin Год назад

You're welcome !! Please, subscribe

@gabrielpatrick6923 Месяц назад

Well articulated, but one thing missing, how to access those routes from within an app/website, like how do you make them a link

@imalkagunasekara8725 4 месяца назад

Great

@Devtamin 4 месяца назад

Thank you

@alexeivodopianov5440 Год назад

Excellent Tutorial. Thank you.

@Devtamin Год назад

You are welcome!

@SagaTholan 5 месяцев назад

Thanks man helped a Lot

@Devtamin 4 месяца назад

No problem 👍

@senseisanimeultracool3960 14 дней назад

thanks a lot , that was awesome

@Devtamin 9 дней назад

You're welcome!

@bloodmoney6126 Год назад

excellent stuff bro i owe you one

@Devtamin Год назад

I appreciate your comment! Please, subscribe

@samsamson1414 Год назад

thank you! very helpful. i wish i can give more likes

@Devtamin Год назад

You're welcome!

@shadrack3370 Месяц назад

i loved it

@rc246 11 месяцев назад

This is very helpful. Thank you so much.

@Devtamin 11 месяцев назад

Glad it was helpful!

@jenikaretnakaran1050 Год назад

Thank you for explaining it very well. It really helped me.

@Devtamin Год назад

Glad it helped! Please, subscribe

@cptwinr Год назад

Thank you very much for this short tutorial, you helped me!

@Devtamin Год назад

Thank you for a comment !! Please, subscribe

@chamukaumesha2463 8 месяцев назад

thank you so much

@Devtamin 8 месяцев назад

You're welcome

@om_unique Год назад

Nice bro

@Devtamin Год назад

Thank you for a comment

@semirs.2834 Год назад

Why wouldnt you want the the page to refresh whenever you go from “home” to “blog”? Great video, thank you!

@Devtamin Год назад

Good question! When we use React, we actually follow the concept of single page application

@KalmanWebDesign Год назад

Would it cause any issues if the page refreshes within the react app, or is is just best practice to have it not refresh?@@Devtamin

@kaskilelr3 10 месяцев назад

Thank you, this video was super helpful :) Subscribed

@Alim-yo3sc Год назад

Thank you for your simple explanation!

@Devtamin 11 месяцев назад

You are welcome!

@abdurrazzaaqoniyide4129 Год назад

Thanks. Keep up good work

@Devtamin Год назад

I appreciate your comment. Pls, subscribe

@mohamadmustafa6925 Месяц назад

thank you. it's really wonderful your manner

@mellowhamster Год назад

amazing tutorial ty!

@Devtamin Год назад

Glad it was helpful! Please, subscribe

@HieuNguyen-wn2iz Год назад

So amazing. Thanks!

@Devtamin Год назад

Thank you for a comment. Pls, subscribe

@mnsog5249 3 месяца назад

TYSM SIR!

@tharindumadhushan7776 Год назад

Subscribed Im following your tutorials

@Devtamin Год назад

Thank you so much. I really appreciate your subscription

@saje_9637 Год назад

dude omg thank you SO MUCH u are the best ltrly saved me

@Devtamin Год назад

Glad I could help!! Please, subscribe

@user-rw7wz6mo3l Год назад

thank you

@Devtamin Год назад

You're welcome

@GhazelSafwen Год назад

great work

@Devtamin Год назад

Thank you! Cheers! Please, subscribe

@prateek1347 10 месяцев назад

Thanks man, you are awesome

@emmanueldavidokafor Год назад

Thank you very much for this

@Devtamin Год назад

Always welcome my friend !! Please, subscribe

@sadmanh0 Год назад

thank-you for the great explanation.

@Devtamin 11 месяцев назад

Glad it was helpful!

@fathah9298 Год назад

thanks alot

@Devtamin Год назад

You're welcome. Please, subscribe

@shibilifavasn7407 Год назад

Good video and nice explanation.

@Devtamin Год назад

Glad you liked it! Also, I really appreciate your comment. Please, subscribe

@geraldoa9215 Год назад

nice and straightforward tutorial. Thank you. let's say I have a link within another component which is not part of the nav bar. The component is located inside a component folder. I tried using the example above for it. But I get an error on the webpage.

@TejasviSharma-xj6ih 11 месяцев назад

i have the same issue, i have a Navbar component inside my homepage, this navbar contains links to various pages, tell me will this method work there ?

@HarshDeep61034 Год назад

thanks bro

@Devtamin Год назад

Any time!!

@HarshDeep61034 Год назад

@@Devtamin actually i didn't ended up using routing because i am a beginner and in my React App I had to transfer value of some states to a other page I searched for it and the only solution is redux i guess , so what i did is instead of creating different pages I conditionally rendered the different components. Would you like to see the results?

@zenu5344 Год назад

thanks so much bro

@Devtamin Год назад

Always welcome !! Please, subscribe

@KAZBUNDA 2 месяца назад

Thank you, this video was very helpful, but I have a question. How can I export this project with all the pages separated in their own files. Because "npm run build" will only build the main page and not the others.

@damithrathnayaka9324 Год назад

👍👍

@Devtamin Год назад

You're welcome. Please, subscribe

@tanksalif Год назад

Thanks G!

@Devtamin 11 месяцев назад

Any time!

@RedRhinoPlayz 8 месяцев назад

When I deploy in Vercel I cant access these links what should i do to fix this?

@nikohamil538 3 месяца назад

is there a React Router link in the description or i m just too blind to see it ?

@softwarehardwaresemitech1872 Месяц назад

Can you send the link of your source code? It's a good starter pack of single website

@hunin27 9 месяцев назад

i have a problem, when i click on a page, like home, i go to /home, and its ok. but if then i click on a page like pricing, it goes to home/pricing, but i need to go just to pricing! can you help?

@hunin27 9 месяцев назад

nevermind i solved it. thank you for the tutorial by the way!

@cc-pu1pg Год назад

how to protect routes?

@Devtamin Год назад

You need to step up a state management and authenticate function to check if a user logs in. For example, if the user logged in, show the private components or pages. I hope it helps. I will do videos about react authentication in the future. Please, subscribe