Why is my React Router component taking the wrong style?

Question

I'm using react-router and I separated it as its own component and it works fine but the only issue is that the text from that said routed page appears in the navbar. I'm relatively new to React so if there's anything I'm doing wrong that could be done better, I would love to know!

Code Sandbox

Answer 1

You could move Switch to Home.js :

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import HomeNav from "./NavBar";
import "./NavBar.css";
import Account from "./Account";
import Friends from "./Friends";

class Home extends React.Component {
  render() {
    return (
      <div>
      <Router>
        <HomeNav />
        <h1>
          "this is the friends/account tab" <br />text should be here
        </h1>
          <Switch>
            <Route path="/account" component={Account} />
            <Route path="/friends" component={Friends} />
          </Switch>
      </Router>
      </div>
    );
  }
}

export default Home;

Only put links in Routing.js

class Routing extends React.Component {
  render() {
    return (
        <div>
          <ul>
            <li>
              <Link to="/friends">friends</Link>
            </li>

            <li>
              <Link to="/account">account</Link>
            </li>
          </ul>
        </div>
    );
  }
}

In my understanding is that the component is only showed where the Switch declared.