1.2: React Router Dom
Last updated
Last updated
React router dom is a package that we installed from NPM, which you can see . This package serves one main purpose, and that is enabling use to provide routing within our application in React. If you think back to gold badge and how we routed things, it was using anchor tags in HTML. However, with react applications, we want to not use those as they reload the page, and will make everything take much longer. Since we're using React to make a single page application, when we want to route to a new "page", it's actually not going to reroute our whole web page, but instead just change the content. So the package which we can achieve this through in React Router Dom!
So, summarizing, React Router Dom, allows us to navigate to different sections of our single page application, without causing the page to redirect or refresh.
As with most things in coding, there are several ways to set up React Router Dom, but all of them share the same pieces. In our application we're using a few of these pieces to do our routing. So we'll start with looking in our App.js file at what we've done.
First, let's look at our import:
Notice we're importing the specific part of the package BrowserRouter but we're calling it Router. This is a common rename of the import, because developers are lazy and would rather type Router later, instead of BrowserRouter. Note that this is how you can change the name of specific imports.
Then, let's look at how we use our Router in the code:
So, in our render, we first have our Header which is not inside of the Router. Basically this means that the Header component will not be affected by any route changes at all. Same thing with footer, they will show up regardless of what route we are at! The only thing that changes is the main content of our page, which is controlled by <Sidebar />!
In order for React Router Dom to work, everything that is part of the package, has to be wrapped in a Router. That's basically how it knows that we are using React Router Dom. Without this Router, usually declared in App.js or even index.js, our routing won't work. So don't forget this step when using the package in the future!
Above we saw how to set up the initial Router. Now, let's look at what we've already done in Sidebar to understand how to use the other pieces of this package.
Let's look at our imports first:
Notice that we are importing three things from React Router Dom. These are the last three things we'll be using from the package in this application! This time we kept their names, since they are short!
Next, let's look at how we set up our routing. We need some way to tell react router dom what needs to be shown at each route. So when I go to /functionalcomponent at the end of my url, what will be shown? React router dom has no idea until I tell it what to do! We do that using <Route />s.
Let's look at the code we already have in sidebar:
So let's look at a Route in depth.
This is how we can set up an official Route. Let's first start with exact, what does it mean? Exact limits the path that can match this route to only the words shown. So above, /home will take us to the Home component, but /home/3 will not. Without exact on the Route, /home/3, would also take us to the home component.
Next, is path="/home". This is just saying that the path where this component should be shown is /home!
One more important thing, notice how the component is declared between the open and closing Route tags. Ensure that there are no excess spaces in between the Routes as well, as this could cause it to break. Each Route has to have only one child component. So if you wanted multiple component in one route, you'd have to wrap them all in a div!
So, now that we know how routes work, how can we make sure only one thing shows up at the same time? We can use Switch. We use this to wrap our Routes in because, the Switch acts like a vanilla JS switch, and iterates over the routes and only render the first one that matches the current pathname. This is just an extra assurance that we're not going to have unintentional multiple components render at one time!
So, above, we talked about how we set up the different Routes and components to render, but how can we go to those paths without using anchor tags, and redirecting our site. That's where Link comes in!
Link has a to="/functionalcomponent aspect to it. This is basically telling react router dom where to go. After we click this link, it'll then direct our page, without refreshing and officially redirecting to the new path, at which points our Route should render the appropriate content!
And that's all there is to it. Feel free to reference this chapter a lot moving forward, as you continue to work with React Router Dom throughout this project, and on your future react projects!