Google+
4elements web design & consultancy

Shineyrock

web design & consultancy
Shineyrock web design & consultancy

Shineyrock

  1. web design en consultancy

blog

  1. Home
  2. blog
  3. lees
  4. How to Handle Routing in React
  • like 1 21

    How to Handle Routing in React

    1. November 2016
    2. Daily
    3. gelezen 916

    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).

    mkdir reactRoutingApp
cd reactRoutingApp
npm init

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

    npm install react react-dom --save

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

    npm install webpack webpack-dev-server --save-dev

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

    npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015

    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:

    module.exports = {
    entry: './app.js',
    module: {
        loaders: [
            {
                exclude: /node_modules/,
                loader: 'babel-loader?presets[]=es2015&presets[]=react'
            }
        ]
    },
    output: {
        filename: 'bundle.js'
    }
};

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

    <html>
    <head>
        <title>TutsPlus - React Routing Basic</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="bundle.js"></script>
    </body>
</html>

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

    import React from 'react';
import {render} from 'react-dom';

const App = () => {
    return (
        <h2>{'TutsPlus - Welcome to React Routing Basic!'}</h2>
    );
};

render(
    <App />,
    document.getElementById('app')
);

    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.

    webpack-dev-server

    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.

    const Navigation = () => {
    return (
        <section>
            <App />
            <ul>
                <li>{'Home'}</li>
                <li>{'Contact'}</li>
                <li>{'About'}</li>
            </ul>
        </section>
    );
};

    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. 

    const About = () => {
    return (
        <section>
            <h2>{'Welcome to About!'}</h2>
        </section>
    );
};

const Contact = () => {
    return (
        <section>
            <h2>{'Welcome to Contact!'}</h2>
        </section>
    );
};

    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.

    npm install react-router --save

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

    import {Link, Route, Router} from 'react-router';

    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.

    render(
    <Router>
        <Route
            component={Navigation}
            path="/"
        />
        <Route
            component={About}
            path="/about"
        />
        <Route
            component={Contact}
            path="/contact"
        />
    </Router>,
    document.getElementById('app')
);

    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.

    const About = () => {
    return (
        <section>
            <h2>{'Welcome to About!'}</h2>
            <Link to="/">{'Back to Home'}</Link>
        </section>
    );
};

const Contact = () => {
    return (
        <section>
            <h2>{'Welcome to Contact!'}</h2>
            <Link to="/">{'Back to Home'}</Link>
        </section>
    );
};

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

    const Navigation = () => {
    return (
        <section>
            <App />
            <ul>
                <li>{'Home'}</li>
                <li>
                    <Link to="/contact">{'Contact'}</Link>
                </li>
                <li>
                    <Link to="/about">{'About'}</Link>
                </li>
            </ul>
        </section>
    );
};

    Save the changes and restart the webpack server.

    webpack-dev-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.

    Photo

    martijn broeders

    founder/ strategic creative bij shineyrock web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    telefoon: 434 210 0245
    1
    Plaats reactie...
    4elements
    Comments

Per - categorie

Op - datum

Copyright © 1999 - 2026 Shineyrock web design en consultancy, Alle rechten voorbehouden / Algemene voorwaarden / Sitemap: XML, HTML, Images, Mobile, News