A simple guide to using React Router

If you’ve been using React JS for a while you’re probably used to having blazingly fast user experiences in a single-page application. But, you might have got to the point where you want to have multiple page applications — allowing the user to use the URL to navigate your application. In this article, a basic example will be used to show you how React Router can be implemented to do this.

This is what you will have created by the end of the tutorial.

What is React Router?

React Router is a library used in React to create routing in your react app. You can use it to create the appearance of multiple pages, allowing the user to navigate through multiple views.

When a user clicks on a link, it should render specific components and the URL should change

Getting Started

1. Before beginning, we are going to create a react app using Create React App. To do this:

• open a terminal and cd into your project folder
• run the command npx install create-react-app routerExample

If you are unsure of how to do this, I suggest you work through some tutorials before learning how to use React Router. The official React documentation is a great place to start. It teaches you fundamental concepts to give you a deep understanding of React (https://reactjs.org/tutorial/tutorial.html).

After running this command, you’ll have a project folder created for you that has some pre-made files and boilerplate code. Do the following to your src/App.js file:

• delete the line which imports the logo file HINT: starts with import logo
• delete the entire <header> tag from the render method
• in it’s place, add <h1>Homepage</h1> as the child of the <div className="App">

This is what your code should look like

2. Next, in your src folder, create a components folder. It is good practice to structure your app in this way, especially when creating larger apps. Grouping similar files together helps to make your code more readable.

Create two components: About.js and Contact.js.

3. Open your index.js file and import the two components you have created.

4. Now, install the react-router-dom using: npm install react-router-dom. Import the react-router-dom that you have installed in index.js. This gives us three components that we need to implement routing (Route, Link and BrowserRouter).

5. We will now use the Route component which accepts two props: path and component. This will need to be wrapped by the <Router> component. You should now be able to render the pages you have created. You can access these manually by typing the paths you have created into the URL.

For your first path, you will need to use exact path. This is because the home path uses the same slash ‘/’ as other paths. N.B: If you do not use exact path, it will render all components on one page. This is because the / URL is matching both the homepage and all other pages.

If you go to the /about path, you will see that component render on the page.

Your entire code in index.js should now look like this:

If you’ve made it this far, GREAT! We will now use the the <Link> component that we imported. This will allow us to navigate to the pages without having to manually type the URL.

6. Continue working in your index.js file. Within the <Router> tag, add an <ul>. This will list your pages and provide a <Link> to the different paths.

Now if you render your app, you will see links to the three pages you created (Home page, about me page and contact page). When you click on the links, you should see the components render and the URL change automatically.

This is what your app should look like.

That’s it! You have used React Router to create a dynamic web page. You may now want to look into styling your web page or creating a navigation bar using the code you have written.

For a full code example see: https://github.com/mareena88/React-Router-Example

If you have any questions or feedback about this tutorial, please comment below.