Google+
4elements web design & consultancy

4elements

web design & consultancy
4elements web design & consultancy

4elements

  1. web design en consultancy

blog

  1. Home
  2. blog
  3. lees
  4. Understanding Nested Routing in React
  • dislike -4 31

    Understanding Nested Routing in React

    1. January 2017
    2. Daily
    3. gelezen 675
    4elements | web design Den Haag blog • Understanding Nested Routing in React

    React is a JavaScript library built by Facebook for building user interfaces. If you are new to React, I would recommend reading one of our earlier tutorials on getting started with React. In this tutorial, we'll discuss how to handle nested routing in a React web application.

    Setting Up the App

    We'll start by setting up our React web application. Let's create a project folder called ReactRouting. Inside ReactRouting, create a file called app.html. Below is the app.html file:

    <html>

<head>
    <title>TutsPlus - React Nested Routing</title>
</head>

<body>
    <div id="app"></div>
    <script src="bundle.js"></script>
</body>

</html>

    Inside the ReactRouting folder, initialize the project using Node Package Manager (npm).

    npm init

    Enter the project-specific details or press Enter for defaults, and you should have the package.json file inside the ReactRouting folder.

    {
  "name": "reactroutingapp",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

    Install the react and react-dom dependencies using npm.

    npm install react react-dom --save

    Install the babel package using npm and save it to the package.json file.

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

    babel packages are required to transform the JSX code into JavaScript. Create a webpack config file to handle the webpack configurations. Here is how the webpack.config.js file would look:

    module.exports = {
  entry: './app.js',

  output: {
    filename: 'bundle.js',
  },

  module: {
    loaders: [
      { exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
    ]
  }
}

    app.js is the file where our React code would reside. Create a file called app.js inside the ReactRouting folder. Import the required react libraries in app.js. Create a component called App having a div with some text. Render the component using the render method. Here is how the basic app.js file would look:

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

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

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

    Restart the webpack development server.

    webpack-dev-server

    Once the server has been restarted, you should be able to view the React app running on http://localhost:8080/.

    Handling Routing in React

    We'll be making use of react-router to implement routing and nested routing. First, install react-router in our project.

    npm install react-router --save

    Now we have react-router installed in our project. Let's create a couple of views to implement routing. Inside the app.js file, create two components called view1 and view2. Here is how the code would look:

    const View1 = () => {
    return(
        <h3>{'Welcome to View1'}</h3>
    );
};

const View2 = () => {
    return(
        <h3>{'Welcome to View2'}</h3>
    );
};

    Create a Menu component to display View1 and View2 on clicking. Here is how it looks:

    const Menu = () => {
    return(
		<section>

            <ul>
                <li>{'Home'}</li>
                <li>
                    <Link to="/view1">{'View1'}</Link>
                </li>
                <li>
                    <Link to="/view2">{'View2'}</Link>
                </li>
            </ul>
        </section>
	)
};

    Let's use the react router to display the default route for our application. Make the Menu component the default route. Also define the route for the View1 and View2 components. Here is how it looks: 

    render(
    <Router history={hashHistory}>
        <Route component={Menu} path="/"></Route>
        <Route component={View1} path="/view1"></Route>
        <Route component={View2} path="/view2"></Route>
    </Router>,
document.getElementById('app'));

    Save the above changes and restart the webpack server. You should have the vertical navigation menu displayed at http://localhost:8080/webpack-dev-server/.

    An example of the vertical navigation menu

    Try clicking on the View1 and View2 links, and it should navigate to the appropriate components.

    Nested Routes in React

    We already have an App component which displays the header text. Suppose we want the menu click to display the appropriate view, but we want it to be rendered inside the App component. 

    We want the navigation menu to be available across all pages. In order to achieve this, we'll try to nest our react components View1 and View2 inside the App  component. So whenever the View1 is rendered, it's displayed inside the App component.

    Now modify the router config and place the View1 and View2 route config inside the App component route.

    render(
    <Router history={hashHistory}>
        <Route component={App} path="/">
            <Route component={View1} path="/view1"></Route>
            <Route component={View2} path="/view2"></Route>
        </Route>
    </Router>,
document.getElementById('app'));

    Modify the App component to nest the Menu component inside it.

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

    To render the nested routes inside the App component, we'll add props.children to the App component. Pass in props as a function argument to the App component.

    const App = (props) => {
    return (
        <div>
            <h2>{'TutsPlus - Welcome to React Nested Routing App'}</h2>
            <Menu />
            {props.children}
        </div>
    );
};

    Let's also add one Home component to our application.

    const Home = () => {
    return(
        <div>
            <h3>{'Welcome Home !!'}</h3>
        </div>

    );
};

    Include the Home component in the nested route list.

    render(
    <Router history={hashHistory}>
        <Route component={App} path="/">
            <Route component={Home} path="/home"></Route>
            <Route component={View1} path="/view1"></Route>
            <Route component={View2} path="/view2"></Route>
        </Route>
    </Router>,
document.getElementById('app'));

    Save the above changes and restart the server, and you should be able to view the application. Click on the menu items listed, and each when clicked should render nested inside the App component.

    The app nested in the App component

    Wrapping It Up

    In this tutorial, you saw how to implement nested routing in a React application using react-router. You can develop small independent components and then use the components to create larger applications. Making it possible to stitch up small components into large applications is what makes React really powerful. 

    React is becoming one of the de facto platforms for working on the web. It’s not without its learning curves, and there are plenty of resources to keep you busy, as well. If you’re looking for additional resources to study or to use in your work, check out what we have available in the Envato marketplace.

    Source code from this tutorial is available on GitHub. Let us know your suggestions and thoughts in the comments below.

    Photo

    martijn broeders

    founder/ strategic creative bij 4elements web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    telefoon: 06 38 55 28 54
    Plaats reactie...
    4elements
    Comments

Per - categorie

    Op - datum

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