text: 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.
  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}</Route> <Route component={View1}</Route> <Route component={View2}</Route> </Router>, document.getElementById('app'));
  Save the above changes and restart the
  webpack server. You should have the vertical navigation menu displayed at.
  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} <Route component={View1}</Route> <Route component={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} <Route component={Home}</Route> <Route component={View1}</Route> <Route component={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.
  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.
  Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post
  