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.

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 (
    

      
{article.name}
      
{article.description}
      More info.
    
  )
}

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

  return (
    

      
{article.name}
      
{article.description}

      

        {article.resources.map((sub) => (
          

            {sub.name}
          
        ))}
      

      


      
    
  )
}

function Articles ({ match }) {
  return (
    

      
Articles
      

        {articles.map(({ name, id }) => (
          

            {name}
          
        ))}
      

      


      
    
  )
}

function Home () {
  return (
    

      Home.
    
  )
}

class App extends Component {
  render() {
    return (
      
        

          

            
Home
            
Articles
          

          


          
          
        
      
    )
  }
}

export default App

Web Programming Tutorials Example with Demo

Read :

• Jobs
• Make Money
• Programming

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.