Nested routing in React Router

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://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://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://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://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://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://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 :

  Lenovo laptop wifi Solution steps - Fix lenovo z570 z580 WiFi Issues

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.

Leave a Reply

avatar
  Subscribe  
Notify of