Trying to go back to “/” in react router?

Question

So what I want is to have a top-level routing in App.js that routes to Home on \"/\". In Home i want to render a few things and then

Answer 1

There are a few things that you need to correct.

First, you must have just a single Router in your App and not nested Router

Second, If you have an exact keyword on the parent Route then the nested Routes won't match since the match will fails at the parent itself

Third, Then you don't want to pass custom props to the child component, you must render them like component={Home} and not component={() => } and if you want to pass props to children, you must use render and not component prop and write render={(props) =>

Your complete code will look like

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

class App extends Component {
  render() {
    return (
      

        
          

            
              Go to home
            
            
            
          
        
      
    );
  }
}

class Home extends Component {
  render() {
    return (
      

        

          
          
        
      
    );
  }
}

class HomeController extends Component {
  render() {
    return (
      

        
          Go to about
        
      
    );
  }
}

class About extends Component {
  render() {
    return 
ABOUT
;
  }
}

class Other extends Component {
  render() {
    return 
OTHER
;
  }
}

render(, document.getElementById("root"));

Working demo

You can refer the following question for more details

Passing custom props to router component in react-router v4

React Router 4 Nested Routes not rendering