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

แชร์
ฝัง
  • เผยแพร่เมื่อ 4 ธ.ค. 2024

ความคิดเห็น • 153

  • @NikkiJ505
    @NikkiJ505 ปีที่แล้ว +42

    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!

    • @Ashur-lab
      @Ashur-lab 4 หลายเดือนก่อน

      kinda the same story here XD

    • @muntahajabbar5814
      @muntahajabbar5814 3 หลายเดือนก่อน

      Can you tell what did you do? cuz I have been trying for like 4 days straight but still stuck

  • @Shaddymaze
    @Shaddymaze ปีที่แล้ว +64

    From the thumbnail to the content, no filler, just pure value - thank you! Easiest subscribe I've ever done. Keep it up!

    • @TrevoltIV
      @TrevoltIV  ปีที่แล้ว +3

      Of course, I'm a minimalist, looks like it's paying off haha

    • @Crackerbarrelkid55-vg6pl
      @Crackerbarrelkid55-vg6pl 8 หลายเดือนก่อน +1

      Except for my eyes. My nose is pressed up to the screen to see whats happening. Bring your own magnifying glass nahmeannn

  • @IonizedComa
    @IonizedComa 10 หลายเดือนก่อน +13

    Straight to the point, it's mutch more cleaner than conditionally rendering pages.

    • @IonizedComa
      @IonizedComa 10 หลายเดือนก่อน

      @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 9 หลายเดือนก่อน +6

    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

  • @idkwhattonamemyself2
    @idkwhattonamemyself2 2 หลายเดือนก่อน +1

    bro, i tried 5 tutorials in a row and i was about to lose my freaking mind until i found yours, this one actually work unlike the others! and i am using a fancy nav bar and all and it still works, it's amazing! thank you so much!!!!!!

  • @figschannel
    @figschannel 2 หลายเดือนก่อน +1

    the best tutorial ever, short and perfectly functioning, made my 3 months of researching about how to do it worth it

  • @vincentjansevanrensburg2378
    @vincentjansevanrensburg2378 10 หลายเดือนก่อน +5

    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

  • @thehitlist4046
    @thehitlist4046 3 หลายเดือนก่อน

    This guy sounds like the most chill guy on earth. Almost as if he's being forced to even make the video 😂. Love it. Very easy subscribe.

  • @jonwakefield813
    @jonwakefield813 11 หลายเดือนก่อน +3

    good video. Thanks for not wasting time on CSS / HTML and just focusing on react

  • @younesmed3770
    @younesmed3770 8 หลายเดือนก่อน +1

    Thanks a lot bro, I've been searching for an answer for more than an hour now , god bless you

  • @navysealalex
    @navysealalex ปีที่แล้ว +2

    Just by looking at the thumbnail It solved my problem, thank you LOL. Will be studying your video heavily !

  • @diegoguerrero9364
    @diegoguerrero9364 2 หลายเดือนก่อน

    Nice job! after many tutorials, this one is straight to success

  • @williamdevonshire356
    @williamdevonshire356 ปีที่แล้ว +42

    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  ปีที่แล้ว +13

      I know right, I always cut to the chase because people are here to learn routing not CSS lol

    • @devTalks3641
      @devTalks3641 4 หลายเดือนก่อน

      For real dude

    • @samuelmwendwa4327
      @samuelmwendwa4327 หลายเดือนก่อน

      This is the realest comment ever

  • @dest5218
    @dest5218 8 หลายเดือนก่อน +1

    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 ❤

  • @talhaonder3389
    @talhaonder3389 7 หลายเดือนก่อน +1

    simpler tutorial i ever seen keep doin this

  • @ScriptSecretsExplain
    @ScriptSecretsExplain 11 หลายเดือนก่อน +3

    straight to the point w clear explanation. EZ +1 sub

  • @SomeFreeTimeActivities
    @SomeFreeTimeActivities 5 หลายเดือนก่อน

    Dude you are a legend. You made that so easy to learn.

  • @ShanYTAu
    @ShanYTAu 4 หลายเดือนก่อน

    You absolute legend. Cannot thank you enough. Great video

  • @davi48596
    @davi48596 10 หลายเดือนก่อน +1

    I'm having so much fun, thanks!!

  • @MahiBasharAkash
    @MahiBasharAkash 7 หลายเดือนก่อน +3

    this video is real and working perfectly. anyone can study with this video😄😄😄😄

  • @khanarman9212
    @khanarman9212 11 หลายเดือนก่อน

    For home/index page I have searched lots but I didn't find anything think but this video help me lot

  • @0.1tahmidemam14
    @0.1tahmidemam14 ปีที่แล้ว +3

    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  ปีที่แล้ว +1

      Thanks for the feedback!

  • @JohnKirigha-t3o
    @JohnKirigha-t3o 3 หลายเดือนก่อน +1

    Thanx Man,you earned my subscription

  • @mirjalol_nightmares
    @mirjalol_nightmares ปีที่แล้ว +1

    no bullshit, just straightforward, thank u so much

  • @0rekeroni
    @0rekeroni 5 หลายเดือนก่อน +1

    Very helpful and straight forward thanks!

  • @attahchristian6699
    @attahchristian6699 ปีที่แล้ว

    Thanks man, you just saved my heart. Bless your heart!

  • @Loomisheep
    @Loomisheep 5 หลายเดือนก่อน

    you're the goat, thank you

  • @bryantony9836
    @bryantony9836 10 หลายเดือนก่อน

    Knawledge!!!, Great video brother.

  • @kostiantynkarzhanov9216
    @kostiantynkarzhanov9216 ปีที่แล้ว +2

    Thank you! Concise and very helpful tutorial! 💛

  • @crix_05
    @crix_05 ปีที่แล้ว

    You are chill, man....

  • @ryanfin125
    @ryanfin125 9 หลายเดือนก่อน

    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?

  • @cjdrix
    @cjdrix ปีที่แล้ว +1

    Thanks for this great content! It really helps me

  • @ritiksaini9245
    @ritiksaini9245 6 หลายเดือนก่อน

    thanks mate concept cleared + subscribed

  • @danielwilson2827
    @danielwilson2827 ปีที่แล้ว

    Awesome job man, keep it up, you'll do well!

  • @sixevensage7004
    @sixevensage7004 5 หลายเดือนก่อน

    Thank you so much. Good Clear Content!

  • @miusoft
    @miusoft 11 หลายเดือนก่อน +1

    Keep it up! good tutorial 🔥

  • @terezachudejova4189
    @terezachudejova4189 3 หลายเดือนก่อน

    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 11 หลายเดือนก่อน

    Thanks for this great content!

  • @amancharlamanas3812
    @amancharlamanas3812 ปีที่แล้ว +1

    Keep making more informative videos, Thanks a ton!

    • @TrevoltIV
      @TrevoltIV  ปีที่แล้ว

      Ten four good sir, no problem

  • @SwiftCuts-vl5xg
    @SwiftCuts-vl5xg 4 หลายเดือนก่อน

    Good explanation thank you

  • @ColeHartman1
    @ColeHartman1 4 หลายเดือนก่อน

    Learned a lot

  • @aswinkrishnam2915
    @aswinkrishnam2915 หลายเดือนก่อน

    Wht was your node version when you were doing this

  • @ronzhang6510
    @ronzhang6510 ปีที่แล้ว

    Really helpful video, solve my problem

  • @dr__ey
    @dr__ey ปีที่แล้ว

    this was very helpful!! thank you :)

  • @fourchaite2585
    @fourchaite2585 ปีที่แล้ว

    Thank for that video you help me a lot !!!

  • @AkbarAli-bt7xi
    @AkbarAli-bt7xi 4 หลายเดือนก่อน

    The shortcut for opening terminal is ctl + `

  • @tubahosseini
    @tubahosseini 7 หลายเดือนก่อน

    thanks. that was very helpful 😊

  • @fase8729
    @fase8729 3 หลายเดือนก่อน

    10:00 let's say I have object like
    const ([cards])=useState[{
    title: about,
    link: About,
    ...},{...}];
    How can I add router into that.

  • @chaitanyakrishna9398
    @chaitanyakrishna9398 ปีที่แล้ว

    Good Content up to mark explanation. I need small suggestion, Implementing Router tag in app.js or index.js, which would be best practice?

  • @rogin8265
    @rogin8265 ปีที่แล้ว +1

    What if i have multiple pages to display as index element?

  • @ScaleShift
    @ScaleShift 6 หลายเดือนก่อน

    Awesome, thanks!

  • @pinterbence5
    @pinterbence5 ปีที่แล้ว +2

    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  ปีที่แล้ว +1

      If you have discord I’d be happy to hop on a screen share real quick and help you

    • @TrevoltIV
      @TrevoltIV  ปีที่แล้ว +1

      @@pinterbence5 Ok adding you now

    • @joshuaabulu9
      @joshuaabulu9 ปีที่แล้ว

      I have this same issue. How did you fix yours please?

    • @TrevoltIV
      @TrevoltIV  ปีที่แล้ว +1

      @@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 ปีที่แล้ว +1

      @@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

  • @sghangaan
    @sghangaan 8 หลายเดือนก่อน

    This helps me a lot, Can I see your Index.js and index.html?

  • @enithecreator
    @enithecreator ปีที่แล้ว

    Thanks for this.

  • @andrewzerdelian5060
    @andrewzerdelian5060 ปีที่แล้ว

    What extension was that, that was suggesting you codes ?

  •  5 หลายเดือนก่อน

    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

    •  5 หลายเดือนก่อน +1

      @@TrevoltIV thank you so much

  • @Scum_p
    @Scum_p 6 หลายเดือนก่อน

    best tutorial on react router!

  • @blackpurple9163
    @blackpurple9163 ปีที่แล้ว +1

    The * route checks other paths before leading to the error page, it doesn't matter where you put it

  • @glucose4420
    @glucose4420 ปีที่แล้ว

    thanks alot new subscriber!!

  • @magnificentmesh2640
    @magnificentmesh2640 ปีที่แล้ว

    Thanks a lot bro🤩

  • @ramdorak3149
    @ramdorak3149 ปีที่แล้ว

    Thanks for helping me out🤗🤗

  • @dawnstar24
    @dawnstar24 10 หลายเดือนก่อน

    I'm having a problem. Where when you deploy the build. The url dont work.

  • @raffph
    @raffph 10 หลายเดือนก่อน

    how about react landing page? it is okay to use react router? example when i click about it scroll down automatically

  • @AboMeezO
    @AboMeezO 4 หลายเดือนก่อน

    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

  • @bhawnaaggarwal6566
    @bhawnaaggarwal6566 5 หลายเดือนก่อน

    What if we have database also which i am handling using get request,

  • @eobodai
    @eobodai ปีที่แล้ว

    You are the best

  • @nemeziz_prime
    @nemeziz_prime 11 หลายเดือนก่อน

    Really easy to understand. Thanks for this video 🫡

  • @hoxworth983
    @hoxworth983 3 หลายเดือนก่อน

    Thanks dude

  • @rogers.adinda
    @rogers.adinda หลายเดือนก่อน

    Thank you!

  • @vyankateshmiskin9618
    @vyankateshmiskin9618 ปีที่แล้ว

    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

  • @gigxr
    @gigxr ปีที่แล้ว +1

    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.

  • @shyexe
    @shyexe 8 หลายเดือนก่อน

    Good tutorial ty

  • @kapgames3710
    @kapgames3710 ปีที่แล้ว

    THANK YOU SO MUCH BROOO

  • @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???

  • @TechGeniusHacks
    @TechGeniusHacks 10 หลายเดือนก่อน

    When you are typing the codes, it completes by itself? What is the extension called?

    • @TechGeniusHacks
      @TechGeniusHacks 10 หลายเดือนก่อน

      @@TrevoltIVthanks. You explained very well btw 🙏🏻 . I subbed

  • @bhawnaaggarwal6566
    @bhawnaaggarwal6566 5 หลายเดือนก่อน

    What if someone makes post request how we will handle that ??

  • @coding6291
    @coding6291 13 วันที่ผ่านมา

    Nice Video, the only thing that could be better is that your IDE fontsize is very small.

  • @SherryTYR
    @SherryTYR ปีที่แล้ว

    Hey bro! Thanks for the tutorial. Where do we need to store images?

    • @ProfitEdge.01
      @ProfitEdge.01 ปีที่แล้ว

      in a public folder outside the src folder

  • @beans4274
    @beans4274 4 หลายเดือนก่อน

    the goat

  • @valzzu
    @valzzu 11 หลายเดือนก่อน

    Hi,
    i did this and it worked perfectly locally but when i built it, it no longer works.

  • @SelinKonak-q5m
    @SelinKonak-q5m ปีที่แล้ว

    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

  • @adiletbaimyrzauulu6589
    @adiletbaimyrzauulu6589 ปีที่แล้ว

    The text is not readable unless you watch the tutorial full screen, but the content is awesome! Thanks!

  • @adeoyemuhdfawas
    @adeoyemuhdfawas ปีที่แล้ว +2

    Thanks! 👍🏿👍🏿👍🏿

    • @TrevoltIV
      @TrevoltIV  ปีที่แล้ว +1

      You’re welcome

  • @definitelynotje
    @definitelynotje 4 หลายเดือนก่อน

    wtf so useful thanks bruhh

  • @gopipanuganti7657
    @gopipanuganti7657 2 หลายเดือนก่อน

    thanks man

  • @onlymusic5976
    @onlymusic5976 ปีที่แล้ว

    Thank you so much !!!

  • @ShreyasChaudhari
    @ShreyasChaudhari ปีที่แล้ว

    thank you so much

  • @guwop12345
    @guwop12345 10 หลายเดือนก่อน

    thank you

  • @brian9790
    @brian9790 ปีที่แล้ว

    can you decrease the font size maybe, just to make sure we see absolutely nothing.....

  • @thujosalu1635
    @thujosalu1635 4 หลายเดือนก่อน

    The index part is not working for me!! What do i do??

    • @thujosalu1635
      @thujosalu1635 4 หลายเดือนก่อน

      There is an error
      Cannot read properties of null (reading 'usefref')

  • @li-lunarink
    @li-lunarink 3 หลายเดือนก่อน

    hey how to make a 404 unknow page

  • @robensonn0004
    @robensonn0004 ปีที่แล้ว +1

    Nice! Keep It Up

    • @TrevoltIV
      @TrevoltIV  ปีที่แล้ว

      Ten four brother, thanks!

  • @niklausmikaelson7332
    @niklausmikaelson7332 ปีที่แล้ว

    What is index in route

    • @TrevoltIV
      @TrevoltIV  ปีที่แล้ว

      It’s just the home page directory, for example www.test.com/

  • @danton_Yn
    @danton_Yn หลายเดือนก่อน

    Yeah, but how am I expected to reach to this pages when clicking an link on my content? In a Nav for example...

    • @TrevoltIV
      @TrevoltIV  หลายเดือนก่อน

      @@danton_Yn Page

    • @danton_Yn
      @danton_Yn หลายเดือนก่อน +1

      @@TrevoltIV bro im really thankful, i knew about but didn't thought it would apply the ref to url... Really appreciate the commitment over the comment section...

  • @aff7n
    @aff7n ปีที่แล้ว

    it is throwing me this error You cannot render a inside another

  • @derangivishnuvardhan1001
    @derangivishnuvardhan1001 ปีที่แล้ว

    thank you sooooooooooooooooooooo muchhhhhhhhhhhhhhhhhhhhhhhhhhhh

  • @harryal100
    @harryal100 6 หลายเดือนก่อน

    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

  • @DRKTRACKMuSIC
    @DRKTRACKMuSIC 8 หลายเดือนก่อน

    good 👍👍

  • @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 ?

    • @petrus2746
      @petrus2746 10 หลายเดือนก่อน

      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.

  • @mubaraqmuhammad5442
    @mubaraqmuhammad5442 4 หลายเดือนก่อน

    awesome