为什么我的react-router不工作？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={主页}而不是Component={主页}

这是我经过两天的广泛研究后找到的答案的链接。

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