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 one place where I chose what to render based on the path.

i.e. if the path is "/" I want to show a Link that can take me to "/about", if the path is "/about" I'll show the About component there.

In App.js I always have a Link that can take me back to "/".

---

So App.js render this:

  <Router>
    <div>          
      <Link to="/">
        <button>Go to home</button>
      </Link>
      <Route exact path="/" component={() => <Home/>} />
      <Route exact path="/other" component={() => <Other/>} />
    </div>
  </Router>

Home render this:

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

HomeController render this:

  <Link to="/about">
    <button>Go to about</button>
  </Link>

and About render this:

  <div>
    ABOUT
  </div>

---

When I start the app it looks like this:

When I click 'Go to about' it looks like this:

correctly updating the url and what is showed by the router in Home

But if I now click on 'Go to home' this happens:

correctly updating the url but keeping the 'about' page when rendering Home?

---

Why is this? Why does "/" seem to still route to "/about"? What would I need to change to make the button route back to "/" and show the 'Go to about'-button again?

Here is all the code I used to recreate the issue: pastebin

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

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>

Answer 3

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>