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={() => <Home/>} and if you want to pass props to children, you must use render and not component prop and write render={(props) => <Home test="1" {...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 (
      <div className="App">
        <Router>
          <div>
            <Link to="/">
              <button>Go to home</button>
            </Link>
            <Route path="/" component={Home} />
            <Route exact path="/other" component={Other} />
          </div>
        </Router>
      </div>
    );
  }
}

class Home extends Component {
  render() {
    return (
      <div className="home">
        <div>
          <Route exact path="/" component={HomeController} />
          <Route exact path="/about" component={About} />
        </div>
      </div>
    );
  }
}

class HomeController extends Component {
  render() {
    return (
      <div className="homecontroller">
        <Link to="/about">
          <button>Go to about</button>
        </Link>
      </div>
    );
  }
}

class About extends Component {
  render() {
    return <div className="about">ABOUT</div>;
  }
}

class Other extends Component {
  render() {
    return <div className="other">OTHER</div>;
  }
}

render(<App />, 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

Answer 2

I needed to make the following changes:

App.js: Change Router to Switch, change the order of the Routes and set "/" to a relative path

<Switch>
  <Route exact path="/other" component={() => <Other/>} />
  <Route path="/" component={() => <Home/>} />
</Switch>

Remove the Router from Home:

<div>
  THIS IS HOME WOO!
  <div>
      <Route exact path="/" component={() => <HomeController/>} />
      <Route exact path="/about" component={() => <About/>} />
  </div>
</div> 

Answer 3

Delete the <Router /> entries from Home

Make the following adjustments to App.js I noticed /other was listed instead of About component for /about Route. If it's correct leave it alone otherwise adjust it to About component as below. You do need to import these components at the top so i'm assuming you are already doing this.

  <Router>
    <div>          
      <Link to="/">
        <button>Go to home</button>
      </Link>
      <Route exact path="/" component={Home} />
      <Route exact path="/about" component={About} />
    </div>
  </Router>

for Home.js, you need to render <HomeController />

  <div>
    THIS IS HOME WOO!
    <HomeController />
  </div>