thank you for this tutorial! i found that for react router version 6, three things to change in App.js: 1. import { Routes, route } from "react-router-dom"; 2. surround tags with 3. remove exact and replace component with element, eg.
I have been searching all day examples, for how to create a react multipage app and they were too complicated. And now I got this video and now I have a good base for my homework app. Thank you :)
I was testing around with this and found the 2 cleanist way of making this. 1. Put all the pages.js files in a "routes" folder 2. To make templates, put it in app.js, it will show no matter what.
2021 It worked, but i had a problem while doing it, idk if it is because i'm using yarn but, i needed to do "yarn add react-router-dom" and "yarn add @types/react-router-dom", if you dont add the @types you cant import the router-dom. Anyway, ty mate.
Hey Caleb. Thanks mate. Glad it helped you out. Have you hear of Next JS? It's a React Framework which handles this client side routing out of the box. Worth checking out.
It’s using react router to feign multiple pages on a single page. Therefore it’s not sending a get request each time making it smoother. This is a great benefit to using React.
Great vid! had some issues because I was using a newer version of react router, find out that you can stick an @ with version number directly after - npm i react-router-dom@(version) or manually change the version on the package.json file and update the dependencies with an npm install. cheers!
@Conor Bailey please can you explain to me why even as I followed all your steps to the letter my pages are not separated the content of the other pages are in my home page and all the other pages share the Same content which shouldn't be so
Good video and all. I even gave it a like. However I wish Mr. Bailey would have been able to zoom in on his code so that I could see it better. It was pretty hard for me to read it. Otherwise great video and great explanations and great pace. Not too fast or too slow.
By the way, do you have any videos on how to make a website responsive with REACT? Also, can you work with Bootstrap in REACT?, If so, how do you mix Bootstrap in REACT? where would the files go and link together?
hi, I have a question can I use a variable form a js page to another js page in the same web app (e.g. I have 2 survey results so 2 variables and then I want to combine these 2 variables of these 2 surveys to a new survey)
Sweet coding, mate. You're a good help! Very good at explaining things too! Do more videos, perhaps on an Access like interface.. Where you can connect your React webpage to MS Server and manage the database! that'd be great!
Please, learn to type without looking at your hands and then learn vim or some sort of text editor with shortcuts so that you can type and program more efficiently.
thank you for this tutorial! i found that for react router version 6, three things to change in App.js:
1. import { Routes, route } from "react-router-dom";
2. surround tags with
3. remove exact and replace component with element, eg.
Thank you so much
Thanks!
rectify 1. import { Routes, route } from "react-router-dom"; to 1. import { Routes, Route } from "react-router-dom";
Thank you so much!!
Had my page load for ages and then load a blank page, using react-router-dom v6, here's how I fixed it:
In the file you use ReactDOM.render:
In App.js:
MainPage and FullMenu are my two pages
This is by far the best react tutorial I came across !! Thank u
I have been searching all day examples, for how to create a react multipage app and they were too complicated. And now I got this video and now I have a good base for my homework app. Thank you :)
Dude i saw your page, its simply exquisite. It's so satisfying to navigate it. Like a high end car.
I have a problem when I try routing the content in the other pages don't show anything
Exactly what I was looking for.. and a video that doesn't take 2 hours to view.
An easy-to-understand approach to React. Thank you Conor Bailey!
The transition from Music to Coding, that's smooth.
This video has saved me a lot of time.
Thank Conor Bailey.
Great video, just starting with react and this is the first walkthrough that has actually made sense.
Glad it helped mate.
You really are a life saver, Thank you for this video :)
Nice one mate. Glad it helped you out!
This was a great video on getting people started with creating and navigating multiple pages via React. Great work. Thank you so much.
I was testing around with this and found the 2 cleanist way of making this.
1. Put all the pages.js files in a "routes" folder
2. To make templates, put it in app.js, it will show no matter what.
Best Video on this subject so far for me
Thanks pal! Much appreciated!
Great video, I'm new to react and this is a great example of routing. Many thanks
Great tutorial for a React beginner 👍🏾👍🏾👍🏾👍🏾
excellent video ! great starting point
this was very helpful and quick, thanks for making so short and simple for me to understand quickly you are a great teacher.
chill dude ....... step by step Thank you G!
Great video! Exactly what I was looking for and very well explained
Thanks for you comment Patrick. Glad I could help :)
2021
It worked, but i had a problem while doing it, idk if it is because i'm using yarn but, i needed to do "yarn add react-router-dom" and "yarn add @types/react-router-dom", if you dont add the @types you cant import the router-dom.
Anyway, ty mate.
I enjoyed watching it. You re doing a great job man!
Good Job, mate! I like your video. Please do more tutorial in React. Where's the part2? :)
Thank you very much!
That is a comprehensive video. Thanks for sharing.
Thank you for making it so simple and easy to follow. Seriously, video serves its purpose greatly. Thanks
Hey Caleb. Thanks mate. Glad it helped you out. Have you hear of Next JS? It's a React Framework which handles this client side routing out of the box. Worth checking out.
@@ConorBailey No I have not, will check it out! thanks
This is exactly what i wanted....you saved me from a lot of hassle.
is there a way to hide navbar when we go to different pages?
Omgg U saved me 😭😭🙇♀️thank u so much..
Ughh the keyboard is so satisfying 😂
😂
I was thinking the same thing. I miss using a apple keyboard. lol
Thanks mate! Straight to the point!
Very nice tutorial, it saved my life.
Amazing video fam!! You're a life saver.
Very nice tutorial! SImple, short and very useful.
Thank you for the concise and informative tutorial! This helped me out a lot!
I was expecting multi page rendering application.
This tutorial is how to create pages in single page application.
It’s using react router to feign multiple pages on a single page. Therefore it’s not sending a get request each time making it smoother. This is a great benefit to using React.
@@ConorBailey itnext.io/building-multi-page-application-with-react-f5a338489694
Thanks for sharing Venkateshwar. Will take a look into this approach. What project are you working on at the moment?
@@ConorBailey I'm working on a e-commerce project.
@@ConorBailey Yes but this is not multiple pages. this is a SPA. Got to down vote this.
Great video, taught me a new skill, and saved loads of time. Thank you!
Was looking forward to the follow-up video but can't find it? Ps this was so great - it made it so simple, thanks!
Does build folder of reactapp generate saperate Home.html files for each page?
Thanks wow this was very clear and much more simple than I had initially thought! :)
thank you very much, my friend!
Please zoom in more on your code
Great vid! had some issues because I was using a newer version of react router, find out that you can stick an @ with version number directly after - npm i react-router-dom@(version) or manually change the version on the package.json file and update the dependencies with an npm install. cheers!
hey just have a quick question. is .jsx and .js both considered a page? in other words can i use react-router on .jsx files
This vdo is very amazing that I can do it now and so useful for my beginner.
@Conor Bailey please can you explain to me why even as I followed all your steps to the letter my pages are not separated the content of the other pages are in my home page and all the other pages share the Same content which shouldn't be so
my VS code installed me completely different text at files is this becouse of node version I use?
Thanks man This helped me out a lot! :)
Great tutorial. Clear and on point. Many thanks!
Im a beginner it helped a lot thanks
how can I fix the problem when "Link" is shown that "no unused var", i dont get it. I thought that is it from react router dom
is it possible to use a callback function or pass down a 'something={this,props.something}' using this method?
thanks alot nice and very helpful tutorial
Glad it helped mate!
Thanks! Just what i needed!
Good video and all. I even gave it a like. However I wish Mr. Bailey would have been able to zoom in on his code so that I could see it better. It was pretty hard for me to read it. Otherwise great video and great explanations and great pace. Not too fast or too slow.
By the way, do you have any videos on how to make a website responsive with REACT? Also, can you work with Bootstrap in REACT?, If so, how do you mix Bootstrap in REACT? where would the files go and link together?
Thank you very much, Conor!
Just what i needed thank you
Hello mate, how can I make the nav bar to disappear when the button is triggered?
This is so good! Thank u for this :D
I really want to know how to hide with header and footer in home page only?
Anyone know why im getting a blank page when I do this? Even when I copy it exactly its not showing the page components
Even I too am getting a blank page. Could you solve the problem?
@@Juzzyjuzzy if you've solved it can you please explain how you did
Thanks, it was helpful.
Great stuff ! Thank you so much mate !
it was helpful thank you
Thanks so much for this guide
nice video but fonts are quite small
Can you use zooming for phone users please?
syed shoaib will do mate. I have thought about this so will try in future vids 👍
hi, I have a question can I use a variable form a js page to another js page in the same web app (e.g. I have 2 survey results so 2 variables and then I want to combine these 2 variables of these 2 surveys to a new survey)
I Got "Router is not defined" error
Thank you, much appreciated
Amazing Tutorial!
Thanks mate, good content!
Sweet coding, mate. You're a good help! Very good at explaining things too! Do more videos, perhaps on an Access like interface.. Where you can connect your React webpage to MS Server and manage the database! that'd be great!
ALL CAPS thanks for the comment mate. I’ll have a look into connecting React to MS server. 👍
@@ConorBailey Awesome!!
@@ConorBailey here is one of the many tutorials that I've been looking into: dzone.com/articles/aspnet-core-crud-with-reactjs-and-entity-framework
Hi mate. Sorry I’ve only just seen this. Will have a look over the article. How long have you been developing? Any projects going on at the moment?
1 year outside of school, 2-3 years in school. (: and yourself?
You really helped me!
Nice video
Pls increase size of fonts
thanks! this helped me.
Thank you for this.
When would you submit part 2 man!!!!!
Thank you so much!
So, it is MPA or SPA bro?
It is not working with me why i m unable to see anything my browser show blank pages?
Please answer.
How did you solved this error?
nice toutorial ❤️❤️
Thanks bud. Glad it helped!
Great tutorial but Come on, why is the text so small?
You are agood teacher
does not work on ES6 anymore... but a good tutorial
Honest review: zoom in a little more as the words are too tiny to view.
Thanks Alhil. Thanks for the feedback mate. Will make sure to zoom in in future videos.
I became a huge fan and that's it lol
Very helpful
But its single page app not multipage app
AdiL IsmaiL yes technically. Just a video to show how router works.
Please, learn to type without looking at your hands and then learn vim or some sort of text editor with shortcuts so that you can type and program more efficiently.
Thanks Justin. I’ve been meaning to look into vim actually after seeing Ben Awad mentioned it in one of his videos. Will work on my typing. 👍
Thank you very very much!
Looks great! Thanks for the vid!
If y'all have time read Matthew 7:7!
Thank you. Please receive 10 starts. :)
Thank you!!
Nothing is visible
Thanks a lot
Can't c anything. Make the code editor even smaller
Like it! 😊
Thank you