React Router Dom; Section One; RouterBrowser, Route, Switch, Link
Hey everyone, this is a series primarily focused on diving into implementing client-side routing into your web applications using React.js, and within this series, we’re going to be using React-Router-Dom to set up our routing, dynamic URLs, as well as separate pages and content. In this first lesson, I am going to walk you through creating a brand new React app, installing, React Router Dom, and setting up your applications in a way that allows them to have multiple pages and easy internal navigation. Let’s get started.
Installing and Initial Set-Up of React Router Dom
Alright so, I am going to lay out step by step how we’ll go about setting up this new React application, so if you’re following along, make a directory, call it whatever you want, and run this command below to get started. Make sure you already have Node and create-react-app installed prior.
After running that command, you should cd into your newly created directory, react-router-tut-1, and you’ll run the command, npm install react-router-dom (if you’re a yarn lover, i’m sure you’ve figured out by this point that you’ll just run yarn install react-router-dom). Should resemble the CLI screen below.
When its all set and done, you’ll see a CLI prompt stating that react-router-dom has been installed successfully. Now you can run npm start within the command line, and after you receive confirmation that your app is running on localhost:3000, you can also open up this directory with your favorite text editor. After that’s all done, you can pop open your Index.js file. It should resemble something along the lines of this;
We’re going to make some changes! We’ll start with a few imports from the react-router-dom library, specifically BrowserRouter and Route. These are two components that come packaged and ready from the R-R-D javascript library, and we’ll import them as such to use them. After we’ve imported those two components, we are going to delete line 9, where it reads <App />, and replace it with our newly imported components, which will still result in the rendering of App. Instead of <App />, what we’ll replace it with is the BrowserRouter component, and inside that component’s opening and closing tags, we’ll render the App component within a react-router-dom Route component. That Route component will take two props, one denoting its path, entitled path and one denoting where that path is going to go, either component or render, depending on your need. We’ll dive back into the differences between component and render in a different article in this series. When it’s all set and done, your Index.js file is going to look just like this;
Alright, alright, alright! Now that your app is set up to handle multiple routes, and we’ve wrapped our main top level component (App) into BrowserRouter (as Router), we can sit back and let the react-router-dom handle our internal navigation. Now, let’s walk through setting up some of those routes, and what that’s going to look like. Pop open your App.js file, and lets import Route and Switch from the react-router-dom library.
Now clear out your App.js file’s return statement, except for the parent div, with the className of App. Inside that div, you’re going to render a Switch component. Inside the opening and closing tags of that Switch component, is where the bulk of your Routes will live. Now, I have designed a few base components, as well as implemented a little CSS just to have an easier demo app. I will post the link to the github repo with this code at the end of the article. We’ll be rendering these custom components across four routes: A Home Route '/', a Profile Route '/profile', a Store Route '/store', and an About Route '/about'. We are also going to be prefixing our path prop with the react-router-dom keyword exact which will ensure that only that component that WE have specifically designated to render will render when the website’s URL matches that path. Little fuzzy? No worries at all, here’s what it should look like:
Take a notice of that LinkContainer that lives outside the Switch tags. That’s how we are going to navigate around our app, and inside of that LinkContainer is where all of our Links live. It’s important that the LinkContainer exists outside of the Switch tags, so that its not bound to any specific URL, and persists across all pages of the app, in a similar manner to a NAVBAR. Here’s how the home page of our App looks now. SO NEAT!
So, let’s dive into that pesky LinkContainer and get a closer look at our Link components. A Link component takes a prop argument to that can be handled in a number of ways to fit your liking. It can take a string as an argument, an object as an argument, or even a function as an argument, and so in a lot of ways Link can become a pretty versatile tool for providing internal navigation. For right now, we’re going to use a string as its argument. These string argument’s should match the paths weve provided in App, and there should be a Link for each path that we’ve provided.
And with that, we’ve pretty much got the groundwork set for navigating internally within our site! You can disregard the Reactstrap components which were used for styling, and the className’s on each Link, which were also used in styling. So now, if we hit that about link;
Bang. Good to go.
Here’s the link for the github repo, if you get stuck: https://github.com/nicholasgalante1997/react-router-tut-1
