Posted inTechnology / Programming / ReactJS

Nested routing in React Router

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 :

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.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

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

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype