為什么我的反應路由器無法正常工作？ 點擊后網址會更改，但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}

這是經過2天廣泛研究后發現的答案的鏈接...

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