Why isn't my react-router working? URL changes on click but no display on DOM

Question

I have multiple components I am trying to route but I will only show a few components here so I don't overwhelm you. I have installed and imported everything correctly I think.

Here is App.js that controls all the routes, the component "Hello" is for testing, there are no props involved or anything and its still not showing in the DOM. Does it have anything to do with not passing props because before using the router to separate my components, I would just do for example: Are these not being automatically passed with router? I am a beginner using React so any help would be great, thank you!

import React, { Component } from 'react'
import Clients from './components/Clients'
import Lessons from './components/Lessons'
import AddClient from './components/AddClient'
import NavBar from './components/NavBar'
import Hello from './components/Hello'
import AddLesson from './components/AddLesson'
import CalculateIncome from './components/CalculateIncome'
import {Switch, BrowserRouter, Route} from 'react-router-dom'

class App extends Component {
  state = {
    clients : [],
    lessons : [],
  }

  deleteClient = (id) => {
    let clients = this.state.clients.filter(client => {
      return client.id !== id
    })
    this.setState({
      clients: clients
    })
  }

  addClient = (newClient) => {
    newClient.id = Math.random();
    let clients = [...this.state.clients, newClient];
    clients.sort((a, b) => a.name.localeCompare(b.name))
    this.setState({
        clients: clients,
    })
  }

  addLesson = (newLesson) => {
    newLesson.id = Math.random();
    newLesson.date = Date();
    let lessons = [...this.state.lessons, newLesson];
    this.setState({
        lessons: lessons,
    })
    console.log(this.state.lessons)
  }

  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <NavBar/>
          <Switch>
            <Route exact path='/' Component={AddLesson}/>
            <CalculateIncome lessons={this.state.lessons} clients={this.state.clients}/>
            <Route path='/addClient' Component={AddClient}/>
            <Route path='/clients' Component={Clients}/>
            <Route path='/lessons' Component={Lessons}/>
            <Route path='/hello' Component={Hello}/>
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

Here is my navbar.js

import React from 'react'
import {NavLink, withRouter} from 'react-router-dom'

const NavBar = (props) => {
    return (
        <nav>
            <div>
                <h1 className="header text-center my-5" >Welcome to the Tennis App</h1>
                <div className="container text-center">
                    <NavLink className="mx-5" exact to="/">Add Lesson</NavLink>
                    <NavLink className="mx-5" to='/addClient'>Add a New Client</NavLink>
                    <NavLink className="mx-5" to="/clients">Clients</NavLink>
                    <NavLink className="mx-5" to="/lessons">Lessons</NavLink>
                    <NavLink className="mx-5" to="/hello">Hello</NavLink>
                </div>
            </div>
        </nav>
    )
}

export default withRouter(NavBar)

And here is hello.js that is just a dummy test component

import React from 'react'

const Hello = () => {
    return(
        <div className="text-center">Hello there</div>
    )
}

export default Hello

Answer 1

I realized I have to use the render={Home} instead of Component={Home}

Here is a link to the answer I found after extensive 2 day research...

https://medium.com/alturasoluciones/how-to-pass-props-to-routes-components-29f5443eee94