Тёмный
No video :(

How to use React Router for multiple pages on your web app (for beginners) 

Trevolt
Подписаться 1,1 тыс.
Просмотров 136 тыс.
50% 1

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

 

22 авг 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 173   
@NikkiJ505
@NikkiJ505 10 месяцев назад
My dear dude, I took an 18 week bootcamp, stuck 5 weeks now in a final project using react-router, ready to just give it up. THIS VIDEO HELPED ME GET THE MISSING PIECE. THANK YOUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU I will be watching only your videos from now on! THANK YOU!
@SinopleTree
@SinopleTree 21 день назад
kinda the same story here XD
@muntahajabbar5814
@muntahajabbar5814 9 дней назад
Can you tell what did you do? cuz I have been trying for like 4 days straight but still stuck
@Shaddymaze
@Shaddymaze Год назад
From the thumbnail to the content, no filler, just pure value - thank you! Easiest subscribe I've ever done. Keep it up!
@TrevoltIV
@TrevoltIV Год назад
Of course, I'm a minimalist, looks like it's paying off haha
@Crackerbarrelkid55-vg6pl
@Crackerbarrelkid55-vg6pl 4 месяца назад
Except for my eyes. My nose is pressed up to the screen to see whats happening. Bring your own magnifying glass nahmeannn
@IonizedComa
@IonizedComa 6 месяцев назад
Straight to the point, it's mutch more cleaner than conditionally rendering pages.
@TrevoltIV
@TrevoltIV 6 месяцев назад
It just isn’t very good for backend heavy apps. Better to use something like Next. for server side routing
@IonizedComa
@IonizedComa 6 месяцев назад
@TrevoltIV I understand. I also found Server Side rendering a pain in React as well. I'm knowledgeable in backend and usually use template rendering for fullstack hobby projects and hackathons, that's why I started React. My end goal is NextJS though. You think it's possible to jump in Nextjs without too much experience in React?
@dal968
@dal968 5 месяцев назад
Thank god a direct video, simple with what i need. I searched a lot of videos that overcomplicated this simple concept. Subscribed, thanks for the easy explain
@vincentjansevanrensburg2378
@vincentjansevanrensburg2378 6 месяцев назад
excellent video, showing how to properly setup the directory is so important, having watched many videos I had too continually change my folder directory and relevant paths in the app. Also great to note that all this should be in a client folder so that the API and Server folders can be the in the parent folder with the client. self learning coding is not easy, but having to do things right the first time is so important
@williamdevonshire356
@williamdevonshire356 Год назад
i liked that u didnt bother with css.. i hate when they go off on some stupid css tangent that has nothing to do with teaching the thing
@TrevoltIV
@TrevoltIV Год назад
I know right, I always cut to the chase because people are here to learn routing not CSS lol
@devTalks3641
@devTalks3641 19 дней назад
For real dude
@talhaonder3389
@talhaonder3389 4 месяца назад
simpler tutorial i ever seen keep doin this
@JohnKirigha-t3o
@JohnKirigha-t3o 16 часов назад
Thanx Man,you earned my subscription
@younesmed3770
@younesmed3770 5 месяцев назад
Thanks a lot bro, I've been searching for an answer for more than an hour now , god bless you
@navysealalex
@navysealalex 9 месяцев назад
Just by looking at the thumbnail It solved my problem, thank you LOL. Will be studying your video heavily !
@TrevoltIV
@TrevoltIV 9 месяцев назад
Lol well that was easy😂
@dest5218
@dest5218 5 месяцев назад
My brother, keep making more videos, thanks react router was giving me the run around. Just subscribed and read you're profile, glad to see a christian and a gamer. Much love bro ❤
@TrevoltIV
@TrevoltIV 5 месяцев назад
No problem my man all glory to Christ🙏
@jonwakefield813
@jonwakefield813 8 месяцев назад
good video. Thanks for not wasting time on CSS / HTML and just focusing on react
@TrevoltIV
@TrevoltIV 8 месяцев назад
Thanks🙏
@SomeFreeTimeActivities
@SomeFreeTimeActivities Месяц назад
Dude you are a legend. You made that so easy to learn.
@ScriptSecretsExplain
@ScriptSecretsExplain 8 месяцев назад
straight to the point w clear explanation. EZ +1 sub
@0rekeroni
@0rekeroni Месяц назад
Very helpful and straight forward thanks!
@user-nq8pc6gw7j
@user-nq8pc6gw7j 3 месяца назад
this video is real and working perfectly. anyone can study with this video😄😄😄😄
@ShanYTAu
@ShanYTAu Месяц назад
You absolute legend. Cannot thank you enough. Great video
@Loomisheep
@Loomisheep Месяц назад
you're the goat, thank you
@mirjalol_nightmares
@mirjalol_nightmares 8 месяцев назад
no bullshit, just straightforward, thank u so much
@0.1tahmidemam14
@0.1tahmidemam14 Год назад
it was very much helpful brooh!...really really thank ue...i was in a great problem from last 2 weeks in this task
@TrevoltIV
@TrevoltIV Год назад
Thanks for the feedback!
@davi48596
@davi48596 7 месяцев назад
I'm having so much fun, thanks!!
@khanarman9212
@khanarman9212 7 месяцев назад
For home/index page I have searched lots but I didn't find anything think but this video help me lot
@kostiantynkarzhanov9216
@kostiantynkarzhanov9216 Год назад
Thank you! Concise and very helpful tutorial! 💛
@TrevoltIV
@TrevoltIV Год назад
🤞🙏
@ColeHartman1
@ColeHartman1 Месяц назад
Learned a lot
@miusoft
@miusoft 8 месяцев назад
Keep it up! good tutorial 🔥
@AkbarAli-bt7xi
@AkbarAli-bt7xi Месяц назад
The shortcut for opening terminal is ctl + `
@ritiksaini9245
@ritiksaini9245 3 месяца назад
thanks mate concept cleared + subscribed
@christianjosephdimla4708
@christianjosephdimla4708 Год назад
Thanks for this great content! It really helps me
@SwiftCuts-vl5xg
@SwiftCuts-vl5xg 25 дней назад
Good explanation thank you
@attahchristian6699
@attahchristian6699 Год назад
Thanks man, you just saved my heart. Bless your heart!
@TrevoltIV
@TrevoltIV Год назад
Any time 🤙
@sixevensage7004
@sixevensage7004 Месяц назад
Thank you so much. Good Clear Content!
@bryantony9836
@bryantony9836 7 месяцев назад
Knawledge!!!, Great video brother.
@danielwilson2827
@danielwilson2827 Год назад
Awesome job man, keep it up, you'll do well!
@amancharlamanas3812
@amancharlamanas3812 Год назад
Keep making more informative videos, Thanks a ton!
@TrevoltIV
@TrevoltIV Год назад
Ten four good sir, no problem
@ScaleShift
@ScaleShift 3 месяца назад
Awesome, thanks!
@crix_05
@crix_05 9 месяцев назад
You are chill, man....
@ShashankSriv
@ShashankSriv 8 месяцев назад
please zoom in the content next time you record ! :)
@tubahosseini
@tubahosseini 3 месяца назад
thanks. that was very helpful 😊
@terezachudejova4189
@terezachudejova4189 4 дня назад
Thanks for the video! What if I have some links that I want them to redirect me to the for example contact page? I just use the url in href in element?
@kaushalyahansana5844
@kaushalyahansana5844 8 месяцев назад
Thanks for this great content!
@dr__ey
@dr__ey Год назад
this was very helpful!! thank you :)
@TrevoltIV
@TrevoltIV Год назад
Of course
@fourchaite2585
@fourchaite2585 Год назад
Thank for that video you help me a lot !!!
@TrevoltIV
@TrevoltIV Год назад
You’re welcome
@gigxr
@gigxr 10 месяцев назад
hey guys, if your routes works locally doesnt but DOESN'T WORK when you deploy your site (error): 1. make a file inside "public" folder called "_redirects" without file extension 2. copy paste "/* /index.html 200" to the file 3. redeploy your site this was a problem for me when i was deploying thru netlify and always getting error.
@ronzhang6510
@ronzhang6510 Год назад
Really helpful video, solve my problem
@blackpurple9163
@blackpurple9163 Год назад
The * route checks other paths before leading to the error page, it doesn't matter where you put it
@TrevoltIV
@TrevoltIV Год назад
Thanks 👍
@safiuddinshaik322
@safiuddinshaik322 8 месяцев назад
Ohh, thanks dude
@hoxworth983
@hoxworth983 9 дней назад
Thanks dude
@fase8729
@fase8729 6 дней назад
10:00 let's say I have object like const ([cards])=useState[{ title: about, link: About, ...},{...}]; How can I add router into that.
@AboMeezO
@AboMeezO 24 дня назад
Dude, i have a react+vite app, i did what you did in the video and am getting blank, am getting nothing in the website
@ryanfin125
@ryanfin125 5 месяцев назад
You've earned yourself a sub :) Thank you mate. Out of curiosity mate did you have a VSCode extension installed that allowed you to get the auto-predictive text suggestion at 10:46?
@TrevoltIV
@TrevoltIV 5 месяцев назад
Thanks, and yes it’s called GotHub Copilot but it costs $10/month. It’s worth it though
@definitelynotje
@definitelynotje Месяц назад
wtf so useful thanks bruhh
@Scum_p
@Scum_p 3 месяца назад
best tutorial on react router!
@adiletbaimyrzauulu6589
@adiletbaimyrzauulu6589 Год назад
The text is not readable unless you watch the tutorial full screen, but the content is awesome! Thanks!
@shyexe
@shyexe 5 месяцев назад
Good tutorial ty
@enithecreator
@enithecreator 10 месяцев назад
Thanks for this.
@ramdorak3149
@ramdorak3149 Год назад
Thanks for helping me out🤗🤗
@TrevoltIV
@TrevoltIV Год назад
No problem!
@sharongracehangaan8805
@sharongracehangaan8805 5 месяцев назад
This helps me a lot, Can I see your Index.js and index.html?
@magnificentmesh2640
@magnificentmesh2640 11 месяцев назад
Thanks a lot bro🤩
@eobodai
@eobodai 8 месяцев назад
You are the best
@kapgames3710
@kapgames3710 Год назад
THANK YOU SO MUCH BROOO
@onlymusic5976
@onlymusic5976 Год назад
Thank you so much !!!
@glucose4420
@glucose4420 Год назад
thanks alot new subscriber!!
@TrevoltIV
@TrevoltIV Год назад
💯🙏
@beans4274
@beans4274 19 дней назад
the goat
@adeoyemuhdfawas
@adeoyemuhdfawas Год назад
Thanks! 👍🏿👍🏿👍🏿
@TrevoltIV
@TrevoltIV Год назад
You’re welcome
@vyankateshmiskin9618
@vyankateshmiskin9618 8 месяцев назад
When I open any page like aboutus, contact us expect home page it works good error occurs when I refresh that page not found how to resolve it
@TrevoltIV
@TrevoltIV 7 месяцев назад
Hmm, without your code I can't really solve this
@chaitanyakrishna9398
@chaitanyakrishna9398 10 месяцев назад
Good Content up to mark explanation. I need small suggestion, Implementing Router tag in app.js or index.js, which would be best practice?
@TrevoltIV
@TrevoltIV 10 месяцев назад
App.js
@rogin8265
@rogin8265 Год назад
What if i have multiple pages to display as index element?
@TrevoltIV
@TrevoltIV Год назад
You can’t have multiple index pages, it’s one page which is the default page.
@ShreyasChaudhari
@ShreyasChaudhari 10 месяцев назад
thank you so much
@guwop12345
@guwop12345 7 месяцев назад
thank you
@pinterbence5
@pinterbence5 Год назад
Thank you for the video! I have a problem: I deployed the web application, but when I open the URL of any pages except the home page, it won't load (404 error). Please can you help me? What could I have done wrong?
@TrevoltIV
@TrevoltIV Год назад
If you have discord I’d be happy to hop on a screen share real quick and help you
@TrevoltIV
@TrevoltIV Год назад
@@pinterbence5 Ok adding you now
@joshuaabulu9
@joshuaabulu9 Год назад
I have this same issue. How did you fix yours please?
@TrevoltIV
@TrevoltIV Год назад
@@joshuaabulu9 His issue was with his hosting provider, if your problem is only occurring when accessing the live version of the site then it's probably a routing issue that you need to fix on your hosting platform. By default, most hosting providers use a directory based routing system that will conflict with dynamic JavaScript based routing which is what React uses. You need to configure the routing to simply always redirect to the index page (In other words, the "yourdomain.com/" route).
@joshuaabulu9
@joshuaabulu9 Год назад
@@TrevoltIV Thank you I just did it Initially, I hosted the site on render, but it kept returning 'not found' when I try to go to a sub page directly from the URL It was the same issue with netlify. But netlify has a fix by adding a _redirects file to the public folder and adding a code inside that looks like this '/* index.html 200'.. now on netlify, it works, but still doesn't work on render
@monke3043
@monke3043 2 месяца назад
before react router was working....now its not working....i am getting 16 errors
@dawnstar24
@dawnstar24 6 месяцев назад
I'm having a problem. Where when you deploy the build. The url dont work.
@TrevoltIV
@TrevoltIV 6 месяцев назад
This depends on what platform you're deploying it on. Sometimes they have things set up differently
@kamohelolebona4666
@kamohelolebona4666 Год назад
Great tutorial I was kinda bored that You didnt talk about the Go back Home stuff ,But its great i figured it out on my own
@TrevoltIV
@TrevoltIV Год назад
Oh yeah I should’ve tossed that in there. It’s a bit confusing because the tag is replaced
@kamohelolebona4666
@kamohelolebona4666 Год назад
Yeah otherwize your videos are amazing 🔥
@raffph
@raffph 7 месяцев назад
how about react landing page? it is okay to use react router? example when i click about it scroll down automatically
@TrevoltIV
@TrevoltIV 7 месяцев назад
That wouldn’t be something router would be useful for. You can do that with a basic script though.
@valzzu
@valzzu 8 месяцев назад
Hi, i did this and it worked perfectly locally but when i built it, it no longer works.
@TrevoltIV
@TrevoltIV 7 месяцев назад
That could be for a variety of reasons. First of all are you building it and then trying to run it on a host provider? If so, the problem might be that they have pre-determined server side routing that you have to use instead of React Router (or in combination with).
@bhawnaaggarwal6566
@bhawnaaggarwal6566 Месяц назад
What if we have database also which i am handling using get request,
@TrevoltIV
@TrevoltIV Месяц назад
Grab the get parameters from the url using javascript
@TechGeniusHacks
@TechGeniusHacks 7 месяцев назад
When you are typing the codes, it completes by itself? What is the extension called?
@TrevoltIV
@TrevoltIV 7 месяцев назад
GitHub Copilot. It’s an AI extension that costs $10/month
@TechGeniusHacks
@TechGeniusHacks 7 месяцев назад
@@TrevoltIVthanks. You explained very well btw 🙏🏻 . I subbed
2 месяца назад
Hi, what is the extension you used to have the suggestion and auto complete for the React like in the videos? I tried some extensions but it cannot recognize the structure like your one which is helpful
@TrevoltIV
@TrevoltIV 2 месяца назад
GitHub Copilot, it costs $10 a month
Месяц назад
@@TrevoltIV thank you so much
@TrevoltIV
@TrevoltIV Месяц назад
No problem
@derangivishnuvardhan1001
@derangivishnuvardhan1001 10 месяцев назад
thank you sooooooooooooooooooooo muchhhhhhhhhhhhhhhhhhhhhhhhhhhh
@DRKTRACKMuSIC
@DRKTRACKMuSIC 5 месяцев назад
good 👍👍
@nemeziz_prime
@nemeziz_prime 8 месяцев назад
Really easy to understand. Thanks for this video 🫡
@TrevoltIV
@TrevoltIV 8 месяцев назад
Thanks!
@user-nx7bg7om1f
@user-nx7bg7om1f Год назад
I want to connect two different react apps and use them in the same page (I have a home app and login app and ı want when I click the link in home page go to the login app) how can I do this ? Please help me
@TrevoltIV
@TrevoltIV Год назад
I’m not sure why you’re separating the apps but the easiest way I can think of to do that is to just put them online and link over to the other domain or add a route via your hosting platform for that separate index path.
@bhawnaaggarwal6566
@bhawnaaggarwal6566 Месяц назад
What if someone makes post request how we will handle that ??
@TrevoltIV
@TrevoltIV Месяц назад
Post request handling is not possible without server side rendering (like NextJS). The problem is that your React code is running client side, not server side. If you use something like Next.js, you can handle server side operations right in your React code. So either use a get request instead or learn Next (or create your own web handler using PHP or Java, but I doubt you want to do that).
@harryal100
@harryal100 3 месяца назад
That is not working for me :-/ i normally use vue js and i am trying to learn React and if i put a file in a pages folder I cannot display it on the screen .. thanks for the video though
@TrevoltIV
@TrevoltIV 3 месяца назад
You have to adjust the import path
@xtrarox3484
@xtrarox3484 Год назад
Hello my friend : I need some help. I am working on an application that, when pressing the button, will go to the control page of the router connected to it on the Wi-Fi network. I need the code for the button that will raise the user of the application to the page of the router connected to it by taking the IP Gateway address according to each router separately. Can you help???
@TrevoltIV
@TrevoltIV Год назад
You're gonna have to store all the IP's or something for various routers and then either make user type in the router or design some system to detect it somehow.
@SherryTYR
@SherryTYR Год назад
Hey bro! Thanks for the tutorial. Where do we need to store images?
@ProfitEdge.01
@ProfitEdge.01 11 месяцев назад
in a public folder outside the src folder
@thujosalu1635
@thujosalu1635 Месяц назад
The index part is not working for me!! What do i do??
@thujosalu1635
@thujosalu1635 Месяц назад
There is an error Cannot read properties of null (reading 'usefref')
@TrevoltIV
@TrevoltIV Месяц назад
@@thujosalu1635 Looks like you made a typo when trying to type “useRef”
@vishwajeet5051
@vishwajeet5051 2 месяца назад
my g
@mubaraqmuhammad5442
@mubaraqmuhammad5442 Месяц назад
awesome
@brian9790
@brian9790 11 месяцев назад
can you decrease the font size maybe, just to make sure we see absolutely nothing.....
@TrevoltIV
@TrevoltIV 11 месяцев назад
1440p monitor problems😂
@robensonn0004
@robensonn0004 Год назад
Nice! Keep It Up
@TrevoltIV
@TrevoltIV Год назад
Ten four brother, thanks!
@joshualevan
@joshualevan 28 дней назад
links?!
@aff7n
@aff7n Год назад
it is throwing me this error You cannot render a inside another
@TrevoltIV
@TrevoltIV Год назад
not router
@TrevoltIV
@TrevoltIV Год назад
You have to use router to wrap all the route tags
@andrewzerdelian5060
@andrewzerdelian5060 Год назад
What extension was that, that was suggesting you codes ?
@TrevoltIV
@TrevoltIV Год назад
GitHub Copilot, it costs $10 a month though.
@AdnanKhan-yg4ng
@AdnanKhan-yg4ng Год назад
subscribed from pakistan
@TrevoltIV
@TrevoltIV Год назад
Highly appreciated!
@niklausmikaelson7332
@niklausmikaelson7332 Год назад
What is index in route
@TrevoltIV
@TrevoltIV Год назад
It’s just the home page directory, for example www.test.com/
@lettyviana
@lettyviana Год назад
Thank you very much!
@phlox22
@phlox22 Год назад
do we have to type /home,/contacts all the time to navigate to those pages ? Can't we make them clickable like we do in vanilla html,css,js with anchor tags ?
@TrevoltIV
@TrevoltIV Год назад
Yes you can use anchor tags just like normal. For example Home
@petrus2746
@petrus2746 6 месяцев назад
You could use normal anchor tags but this way you'll end up refreshing the whole page whenever you're navigating. Its recommended to use the from React Router Dom it works pretty much like a normal a tag but doesn't refresh the page every time you navigate to a different page, giving you that SPA feel.
@itxsaadgaming7902
@itxsaadgaming7902 Год назад
its version?
@TrevoltIV
@TrevoltIV Год назад
What do you mean?
@mani_kaxrod8232
@mani_kaxrod8232 Год назад
​@@TrevoltIVreact router dom version
@TrevoltIV
@TrevoltIV Год назад
@@mani_kaxrod8232 oh not sure tbh, should have been the most recent but it was 5 months ago so idk
@mani_kaxrod8232
@mani_kaxrod8232 Год назад
@@TrevoltIV np bro. I got it
@travelandeat1609
@travelandeat1609 Месяц назад
kass mai adds pe bhi comment kar pata .....specially yeh dropshiping wali bkl pe
@thechoosen4240
@thechoosen4240 3 месяца назад
Good job bro, JESUS IS COMING BACK VERY SOON; WATCH AND PREPARE
@TrevoltIV
@TrevoltIV 3 месяца назад
“For the wages of sin is death, but the gift of God is eternal life through Jesus Christ our Lord” Romans 6:23
Далее
React router crash course
55:54
Просмотров 36 тыс.
How I Coded An Entire Website Using ChatGPT
18:22
Просмотров 1,9 млн
Every React Concept Explained in 12 Minutes
11:53
Просмотров 569 тыс.
Learn React Router v6 In 45 Minutes
46:20
Просмотров 550 тыс.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 941 тыс.
The Only CSS Layout Guide You'll Ever Need
24:22
Просмотров 162 тыс.
Scammed selling my MacBook, almost
15:09
Просмотров 43 тыс.