Nested routes with react router v4 / v5

Question

I am currently struggling with nesting routes using react router v4.

The closest example was the route config in the React-Router v4 Documentation.

I want t

Answer 1

Using Hooks

The latest update with hooks is to use useRouteMatch.

Main routing component

export default function NestingExample() {
  return (
    
      
       
         
       
     
    
  );
}

Child component

function Topics() {
  // The `path` lets us build  paths 
  // while the `url` lets us build relative links.

  let { path, url } = useRouteMatch();

  return (
    

      
Topics
      

        /topics/otherpath/
      
      

        

          /topics/topic1/
        
        

          /topics/topic2
        
      

      // You can then use nested routing inside the child itself
      
        
          
Please select a topic.
        
        
          
        
        
          
        
      
    
  );
}