- Read Tutorial
- Watch Guide Video
Now if you have never really worked with web applications in the past, you have worked with routing, even if you didn't even think about it that way. So if you go to any kind of website and you go to the home page, and then you decide to click on a link, and then go to the about page, that was a form of routing, you were routed to a different page of the application, and so that's what this section is gonna be all about.
Up until this point, we have been working with a single page literally, we've just been working with this portfolio container and it's nested inside of the app container but we haven't done any kind of navigation and so that's what we're gonna focus in on this section.
Now navigation and routing inside of React and really any kind of JavaScript application is a little bit tricky if you've never used it before.
So if you remember back to when we went through all of the files, and if you remember that when we analyzed the index.html file, I told you that our React application is what is called a spa, and it stands for single page application. So what that means, 'cause single page application doesn't make a lot of sense, because technically what we're going to be creating is gonna have multiple pages, right?
We're gonna have an about page, we're gonna have a home page, we're gonna have a portfolio page, a blog page, and yet it's still called a single page application. The reason for that is because from a document perspective we only have one page, we only have this index.html file and then all of our code. So even our pages actually just slide into this index.html file right here around the app wrapper.
So when I navigate to the about page, or the contact, or the blog page, what's going to happen is that we need to actually, almost fake the routes, so if you're working with a React application and you see that it uses routes, it's not actually using routes in the standard way because we're not being sent to a different document.
If you've built out a static website and that static website had a home page, and then it had an about page, and it had a contact page, or anything like that, you actually had multiple pages and the user was redirected to multiple documents.
What we do with React, and this is also the case for Vue and Angular applications as well, is we have to mock or fake the routes. So we will have routes up here in the URL bar so when they go to the about page it will say /about or /aboutus, when they go to contact it'll say contact, and so it's gonna look the same to users, but because we're only using a single document we have to take a little bit of a different approach and that is where React router comes in.
So React router is a very popular library specifically built for React applications to have all kinds of different routing tools, and that's what we're gonna be working with in this section.
So let's get started, I'm gonna open up Visual Studio Code and let's go to the app.js file. Now in order to work with React router, it is not built into React but it was added in the template that I created and that you should have. So if you come here you can see that we have React-router and React-router-dom, and so as long as you have those then we are able to import them.
So let's come into our app.js file and I'm gonna say import and then this is gonna be a size-able list, so, I'm actually going... anytime you have a size-able list in a JavaScript application like this where you have, maybe four or five elements that you wanna import, I usually put them on different lines.
So I'm gonna say I want to import BrowserRouter and it has to be spelled like this, and I'm actually going to alias it, and the way you can do that is by saying as Router. And I'm doing this, one because it's just a convention I usually follow, but also because one of my big goals for this entire course is to show you as much React as is possible, and so I don't want you to start building another application or work on a legacy React application and then you come across someone who likes using alias' like this and not know what it's about.
So all that I'm doing here is I'm saying there is a library, there's a module inside our React router called BrowserRouter, but I just wanna call it router. And so that's all I'm doing is I'm aliasing it, and then I want to pull in a switch. Now this is different than a JavaScript switch, which is like a conditional, this is a specific module in React router.
Then I want to pull in a actual Route, notice this is not router, this is just Route, and I think that's all we're gonna need right now and that is gonna be from, and then this is react-router-dom and it looks like my prettier plugin wanted to put all of those on one line, so I'm not going to argue with that 'cause it automatically does that on save.
app.js
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
So now that we have these three in here now we can actually set up our routes. So the way that we do this is you come down into our JSX code here and I'm gonna put this, let's just say that we wanna put this right below the navigation container, I think this will be a good spot for it, and so I want to first call our router and then this is going to be a component, and this is a component that we haven't really worked with before.
So up until this point all of the components we've worked with were using self closing tags, but in React, especially when you want to have a lot of flexibility, you can actually wrap code inside of a component. So that's what we're doing right here is React router uses this parent child relationship where we can have a router, and then inside of this router component we can place even more code.
So for the next one let's just place in a div, and then we're going to place other code inside of here and there is a specific reason for this, it's because, and we've not gotten into this in detail, so I don't want this to kind of confuse you at all but whenever you're working with React, if you notice, when you return something, you can only return a single div.
And so, in other words, let me open up one of our smaller items, so I'll open up the portfolio item. So what you cannot do here is you can't say okay I wanna have this div and then props.title, props.url, and then below this I want to have another div and I wanna put some more content here.
This will actually throw an error, and the reason for it may not make sense until you think of JSX as more JavaScript and less as HTML. Because if you think of it as HTML, this seems like it would make sense, however if you think of it in terms of JavaScript, you know in JavaScript if you create a function you can only return a single item.
Well what we're trying to do right here is we're actually trying to return two items, we're trying to return div one and div two, and JavaScript does not allow for that, and so what we need to do is make sure that any time we are returning JSX, we are returning a single item.
It could be a div, it could be a component, if you have multiple items that you want to bring in like we have right here, then you can wrap it up in a div and then put your components inside of it. So that is exactly what we're doing here with the router, I'm putting a div inside of it because we're gonna have multiple other items that we want to include here.
So I'm actually gonna put my navigation container also inside of this div, and now let's start pulling in a couple routes, and this is where the switch comes in. So I'm gonna say switch and we're also gonna wrap the switch up just like this.
<Switch> </Switch>
The way that you can think of the switch component is very much like a conditional. So with this what we can do is declare our routes, so here I can say route and then let's say I want this to exactly match a path, and this path is just gonna be slash, and so this is gonna be our homepage, and then I'll say component equals, and then we have to declare where this path is going to, what it's going to pull from.
So we need to make sure that we're pulling in a homepage component so let's come in here, and if you look inside of our components you can see that we don't have a homepage component. So what I'm gonna do is I'm actually going to create a new folder here and it's called pages.
So this new folder is gonna hold any other pages, this is where our about page can go, and our home page, and everything like that. So inside of pages I'm gonna create a new one and I'm just gonna call it home and then home.js just like this, and then let's also do one for our about page, just so we have two that we can look at.
So about.js and for right now it really does not matter what we're going to put into it so just put in a regular React functional component. And also if you went through my tutorial on how to setup Visual Studio Code, then you also saw my user snippets video, so I have a few helpful snippets I haven't used them up until this point but just to save time I think it is smart to use.
So instead of me typing out everything that's needed for the component, I can just type rf and return and that fills out a functional component and I can just say about.
Now if you did not do that yet, don't worry, but I definitely would recommend that you would, it will save you a lot of time especially as you're building out quite a few components. So you can go back and reference that video, you could even pause this video now, reference that one, and build it out, it's completely up to you.
And then for home I'm gonna do the same thing so let's say just I want to do this, it's rf is my shortcut and this is gonna be my homepage, and now we can just import these. So we wanna have home and now we can just import this at the top. So I wanna import home and that is located inside of pages, and then home, just like that, and let's do the same thing for about, pages and then about.
app.js
import Home from "./pages/home"; import About from "./pages/about";
And now we can declare a route right here, now this one is not going to be exact, we're gonna get into... I know I may be going a little bit faster than normal here it's because I want you to actually see this working and then we'll circle back and we'll see exactly what we're doing here, so, the next route we're gonna define is that about route and I'm gonna actually call it about-us just so you can see, or, this is a portfolio so I guess about-me, and then this component is going to be about, and that's it.
So this should be all that we need to get this working, I know we wrote a little bit more code than usual without testing it out so let's go test this out in the browser, so I'm gonna hit refresh, now we haven't wired up any of these links here so that is not going to work yet, but, if you notice right here, you can see it now says homepage.
And that is because we are on the homepage route, whenever you have a route that just has a slash by itself, that is called, what the technical term is root route, so that is the root route for the whole application, and now let's test out about-me, so I can go up to the URL bar and just say about-me and now you can see it says about.
So all of that is working perfectly, so I definitely like how that is coming along, and so let's kind of circle back and see what's going on here. So how do we know what is happening and how could you go and create this yourself? Well route is one of the components we brought in so this is provided by react-router-dom.
Now route, because it's a component, very similar to our portfolio item component or any of those, it takes props. And one of the props it takes is path, so that's all we're doing here, I don't want you to think that this is some kind of a magical library or anything like that, all we're doing is we're importing someone else's components it's kind of like we built out our own portfolio item component.
It has our own set of features and behavior, what we're doing here is we've imported someone else's component directly into our application so we could use it. Now this component just happens to deal with routing, so we have this route component, we're passing in a prop of path, and that is going to direct the user to whatever route that we want them to go to, in this case it's about-me, above here, it was the root route and then we say what the component is, and this is how the routing engine knows what code to slide in and to render.
So these are pretty similar, the only key difference is you may have noticed is, this says exact and let me show you why it needs to say exact, let me get rid of it, hit save, and if you come back here, you can see this says homepage.
But that's a little bit confusing because if you notice we're still on the about-me route. Well the way the router works is because it is very much like a conditional, I know this says switch but the way that switch works is it's almost like it's setting up a series of if/else conditionals.
So, the way that it functions it's kind of like we said, okay if they come in and the route that they're on is the homepage route, then I want you to show them the homepage. And then if you had a else if, and then you're like but if the route is /about-me, then I want you to show the about component.
Well the problem with this is the about-me page, if you notice, has this little slash here at the very beginning so because of that it means the about-me is actually going to be picked up first, so even though it has more content afterwards it has about-me as the route endpoint, it still is not going to work properly because it's just going to always match this very first one.
So what exact does for us is exact says the only way that this route should be met, the only way it should be true is if it is only the slash, so if there's anything after it then keep on going down the line. So you could very well have an application with dozens of routes so you need to make sure that you're defining exactly the behavior you want, and we're gonna get into how to work with these routes quite a bit.
So this is simply how to define them, so in the next guide we're gonna walk through how we can wire up these links so that when you click on them the user will be redirected.