Intro to React Router
React is a great tool for building single page apps. However, when the scope of an app gets larger, and more complex, things can get a little tricky. Using React Router, especially on these larger projects, can save quite a bit of headache.
Think of React Router as an Air Traffic Controller. These controllers direct air traffic to make sure everything runs smoothly. React Router does the same thing on basic and complex apps, by controlling routes and paths in an organized and efficient way.
In this short post, I’ll show how you can set it up, what it does, and some of it’s basic features.
The Set Up
Assuming you’ve already set up a create-react-app on the command line, now you can use npm to install the React Router.
npm install --save react-router-domOnce we have it installed, we can utilize several key components in our text editor, that are now available to us through the router.
What it does
<BrowserRouter> Browser Router is a router that uses the HTML5 history API to keep the UI of your application in sync with the URL the user is on.
<Route> This components specifies the URL route for the component. This has two attributes, path= and component=. These attributes do basically what they suggest, and specify the path and the component associated with the route.
<Switch> Allows you to render a Route
<Link /> This is a handy component that basically takes the place of anchor tags <a>. But it actually renders and anchor tag in HTML, and comes with some extra features. The primary attribute of link is to=, which specifies the route that the link should go to.
Basic Features
Here’s how I set up some of these functions on a page my team is working on now.
First of all, here’s the main page, or splash page. Now let’s see the code.
As you can see, we’ve listed Browser Router, Route and Switch as dependencies. I haven’t listed Link as a dependency here, because I’m not using it on this page, but will need it on the splash page. All of the pages in our layout are wrapped inside of the <BrowserRouter> tag. And all of our Routes are wrapped inside of the <Switch> tag. Our <Route> tags also include the path= and component= attributes, linking the pages we need them to be associated with. This may look similar to setups we’ve seen with plain HTML, but React, and React Router gives us the ability to do all of this, while still containing it all in a Single Page App.
Above is the setup for the splash page I showed earlier. As you can see, pretty basic components here, and since we’re not utilizing any of the ReactRouter components here, I haven’t listed any as dependencies. Instead, I have each button on the main page as separate components, where I’ll include the <link> component. Let’s take a look at that page.
Here, I’m importing the { Link }, and wrapping the link in a button. Inside the <link> I’m also using the to= attribute to specify the path it needs to go to.
Conclusion
React Router is simple to get started with. One of the other great things about the Router, is that, even if you already have a large project that doesn’t incorporate the router, it’s still easy to install it, and integrate it into the project at any time. I hope this helps get you started, and if you have any questions, feel free to reach out. Thanks!
