Monday, November 21, 2016

How to Handle Routing in React

How to Handle Routing in React

In one of my earlier tutorials, we saw how to get started with React and JSX. In this tutorial, we'll see how to get started with setting up and creating a React app. We'll focus on how to handle routing in a React app using react-router.

Getting Started

Let's start by initiating our project using Node Package Manager (npm).

Install the required react and react-dom libraries in the project.

We'll be using webpack module bundler for this project. Install webpack and webpack development server.

We'll make use of Babel to convert JSX syntax to JavaScript. Install the following babel package in our project.

webpack-dev-server requires a config file where we'll define the entry file, output file, and the babel loader. Here is how our webpack.config.js file will look:

Next we'll create app.html where the React app will get rendered.

Let's create the entry point file app.js for our React application.

As seen in the above code, we have imported react and react-dom. We created a stateless component called App which returns a title. The render function renders the component inside the app element in the app.html page.

Let's start the webpack server, and the app should be running and displaying the message from the component.

Point your browser to http://localhost:8080/app.html and you should have the app running.

Creating React Views

Now we are up and running with our React application. Let's start by creating a couple of views for our React routing application. Just to keep it simple, we'll create all the components inside the same app.js file.

Let's create a main component called navigation in the app.js.

In the above Navigation component, we have the app title and a newly created menu for navigation to different screens of the app. The component is quite simple, with basic HTML code. Let's go ahead and create screens for Contact and About. 

We just created a component to render the About and Contact screens.

Connecting Views Using react-router

In order to connect different views we'll make use of react-router. Install the react-router using npm.

Import the required library from react-router in app.js.

Instead of specifying which component to render, we'll define different routes for our application. For that we'll make use of react-router

Let's define the routes for the Home screen, Contact screen, and About screen.

When the user visits the / route, the Navigation component gets rendered, on visiting /about the About component gets rendered, and /contact renders the Contact component.

Modify the About and Contact screens to include a link back to the home screen. For linking screens, we'll use Link, which works in a similar way to the HTML anchor tag.

Modify the Navigation component to include the link to the other screens from the home screen.

Save the changes and restart the webpack server.

Point your browser to http://localhost:8080/app.html, and you should have the app running with basic routing implemented.

Wrapping It Up

In this tutorial, we saw how to get started with creating a React app and connecting different components together using react-router. We learnt how to define different routes and link them together using react-router

Have you tried using react-router or any other routing library? Do let us know your thoughts in the comments below.

Source code from this tutorial is available on GitHub.


No comments:

Post a Comment