React Router Nested routes

In React Router, you can define nested routes by nesting `Route` components inside each other. Nested routes allow you to create complex user interfaces with multiple levels of navigation and dynamic content.

Here’s an example of how to define nested routes using the `Route` component:

jsx
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function Home() {
  return Welcome to the home page!;
}

function About() {
  return About us;
}

function Contact() {
  return Contact us;
}

function Team() {
  return (
    
      Our team
      
        
          John
        
        
          Jane
        
      
    
  );
}

function Member(props) {
  return {props.match.params.name};
}

function App() {
  return (
    
      
        
          
            Home
          
          
            About
          
          
            Contact
          
          
            Team
          
        
      

      
      
      

      
        
      
    
  );
}

In this example, we’re defining four components (`Home`, `About`, `Contact`, and `Team`) that represent different parts of our application. We’re also defining a `Member` component that takes a `name` parameter from the URL path and uses it to render a team member’s name.

We’re using the `Link` component to create links to different routes, and the `Route` component to define the content to be rendered for each route. We’re also using the `exact` prop on the root route to ensure that it only matches the root URL, and not any sub-routes.

We’re using a nested `Route` component to define the `/team` route and its nested `/team/:name` route. The `Team` component renders a list of team members with links to their individual pages, and the `Member` component renders the name of the selected team member.

By using nested routes, we can create a dynamic user interface with multiple levels of navigation and content. We can also use route parameters to pass data between nested components and create personalized user experiences.

Overall, React Router provides a powerful and flexible way to define nested routes in your application. By using nested routes, you can create complex user interfaces with multiple levels of navigation and dynamic content, and provide a seamless and personalized experience for your users.