Nested routing in React Router

Programming ReactJS Technology

Today, We want to share with you Nested routing in React Router.In this post we will show you react router 4 nested routes example, hear for react router v4 nested routes we will give you demo and example for implement.In this post, we will learn about React Router Architecture and Nested Routes with an example.

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

Snippet Contents

Nested routing in React Router

There are the Following The simple About Nested routing in React Router Full Information With Example and source code.

As I will cover this Post with live Working example to develop react router nested switch, so the Nested Routes and Resources for this example is following below.

Nested routes with React Router

import React, { Component } from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link,
} from 'react-router-dom'

const articles = [
  {
    name: 'Simple React Router',
    id: 'react-router',
    description: 'simple Module, Declarative, MVC component based routing for ReactJS',
    resources: [
      {
        name: 'Element Exists in ReactJS',
        id: 'url-parameters',
        description: "How to Check If an Element Exists in ReactJS",
        url: 'https://www.pakainfo.com/how-to-check-if-an-element-exists-in-reactjs/'
      },
      {
        name: 'React Folder Structure',
        id: 'programmatically-navigate',
        description: "React Folder Structure Best Practices",
        url: 'https://www.pakainfo.com/react-folder-structure-best-practices/'
      }
    ]
  },
  {
    name: 'React.js Tutorials',
    id: 'reactjs',
    description: 'A JavaScript React js library for building very clear and cut user interfaces',
    resources: [
      {
        name: 'ReactJS – Overview',
        id: 'react-lifecycle',
        description: "ReactJS – Overview For Beginners step by step",
        url: 'https://www.pakainfo.com/reactjs-overview-for-beginners-step-by-step/'
      },
      {
        name: 'React JSX Basics Step By Step',
        id: 'react-aha',
        description: "React JSX Basics Step By Step",
        url: 'https://www.pakainfo.com/for-loop-inside-react-jsx-components/'
      }
    ]
  },
  {
    name: 'React JS Programming',
    id: 'functional-programming',
    description: 'React js examples with demo and source code step by step',
    resources: [
      {
        name: 'React JS Change DIV Content on Button Click Example',
        id: 'imperative-declarative',
        description: 'React JS Change DIV Content on Button Click Example',
        url: 'https://www.pakainfo.com/react-js-change-div-content-on-button-click-example/'
      },
      {
        name: 'Reactjs Interview Questions',
        id: 'fn-composition',
        description: 'Top 10 Advanced Reactjs Interview Questions Answers',
        url: 'https://www.pakainfo.com/top-10-advanced-reactjs-interview-questions-answers/'
      }
    ]
  }
]

function Resource ({ match }) {
  const article = articles.find(({ id }) => id === match.params.articleId)
    .resources.find(({ id }) => id === match.params.subId)

  return (
    <div>
      <h3>{article.name}</h3>
      <p>{article.description}</p>
      <a href={article.url}>More info.</a>
    </div>
  )
}

function Article ({ match }) {
  const article = articles.find(({ id }) => id === match.params.articleId)

  return (
    <div>
      <h2>{article.name}</h2>
      <p>{article.description}</p>

      <ul>
        {article.resources.map((sub) => (
          <li key={sub.id}>
            <Link to={`${match.url}/${sub.id}`}>{sub.name}</Link>
          </li>
        ))}
      </ul>

      <hr />

      <Route path={`${match.path}/:subId`} component={Resource} />
    </div>
  )
}

function Articles ({ match }) {
  return (
    <div>
      <h1>Articles</h1>
      <ul>
        {articles.map(({ name, id }) => (
          <li key={id}>
            <Link to={`${match.url}/${id}`}>{name}</Link>
          </li>
        ))}
      </ul>

      <hr />

      <Route path={`${match.path}/:articleId`} component={Article}/>
    </div>
  )
}

function Home () {
  return (
    <h1>
      Home.
    </h1>
  )
}

class App extends Component {
  render() {
    return (
      <Router>
        <div style={{width: 1000, margin: '0 auto'}}>
          <ul>
            <li><Link to='/'>Home</Link></li>
            <li><Link to='/articles'>Articles</Link></li>
          </ul>

          <hr />

          <Route exact path='/' component={Home} />
          <Route path='/articles' component={Articles} />
        </div>
      </Router>
    )
  }
}

export default App

Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Nested routing in React Router.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1.   How to pass data to all views in Laravel 5.8?
  2.   Angular 6 Form Validation Example Tutorial
  3.   Angular 9/8 Select Dropdown | Get Selected DropDown Value on Change Event
  4.   Angular 6 Animation Tutorial with Examples
  5.   User Registration and Login Authentication Code using angular 6
  6.   Laravel 6 Delete and soft delete Examples
  7.   Simple jQuery Auto Image Rotator
  8.   how to loop through an array of objects in javascript?
  9.   How to Create, Access and Delete Cookies in VueJS
  10.   Create React Nested Router component

Leave a Reply

Your email address will not be published. Required fields are marked *