Почему не работает мой реагирующий роутер?URL изменяется при клике, но не отображается в DOM

Question

У меня есть несколько компонентов, которые я пытаюсь направить, но здесь я покажу только несколько компонентов, чтобы не перегружать вас.Я установил и импортировал все правильно, я думаю.

Вот App.js, который контролирует все маршруты, компонент "Hello" предназначен для тестирования, не задействованы какие-либо реквизиты или что-то еще, и он все еще не отображается вDOM.Имеет ли это какое-либо отношение к непропусканию реквизитов, потому что перед использованием маршрутизатора для разделения моих компонентов я бы просто сделал, например: они не передаются автоматически с маршрутизатором?Я новичок в использовании React, так что любая помощь будет отличной, спасибо!

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;

Вот мой 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)

А вот hello.js, который простофиктивный тестовый компонент

import React from 'react'

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

export default Hello

Answer 1

Я понял, что должен использовать render = {Home} вместо Component = {Home}

Вот ссылка на ответ, который я нашел после двухдневного исследования ...

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