React Routing still showing root component even after using exact

Question

I am still a newbie to React. So here I am rendering the root component with two routes: Home and About located in functional components: home.js and about.js respectively. However, even after using exact attribute and , the root component keeps on rendering above. I still cannot figure out how to not render the root component when I am redirecting to any of the mentioned routes?

Heres the live demo: https://codesandbox.io/s/vmz6zwq0k7

Answer 1

The Route component is acting like a "placeholder" for the component you want to render when the URL matches. everything above it (parents and siblings) wont get affected.

Given this code example:

  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Link to="/home"> Home </Link>{" "}
          |
          <Link to="/about"> About Us </Link>{" "}
          <div>
            <Route exact path="/home" component={Home} />
            <Route exact path="/about" component={About} />
          </div>
        </div>
      </BrowserRouter>
    );
  }

This line of code:

<Route exact path="/home" component={Home} />

Is only a "placeholder" for the Home component. It won't render anything only when the path is matching "/home".

When the path will match, the Route component will render the passed component, The Home component in this case.

It will not affect the entire app tree, and for a good reason!
If the entire app would get re-rendered and replaced with the Home component you would loose the navigation links.

Answer 2

I had the same problem looking at the react-routing getting started portion here. https://reactrouter.com/web/guides/quick-start

I placed my Router/BrowserRouter in my App component. Instead place the router in your index.js file like so

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import reportWebVitals from './reportWebVitals';
    import { BrowserRouter } from "react-router-dom";
    
    ReactDOM.render(
      <React.StrictMode>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </React.StrictMode>,
      document.getElementById('root')
    );

Then your app component can look like so and the root route wont be matched if about or users is matched.

import React from "react";
import {
  Switch,
  Route,
  Link
} from "react-router-dom";

export default function App() {
  return (
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}