反应路线未显示我的组件。仅显示一个组件，没有显示其他组件

我有想要在我的应用程序中显示的组件。但是“ App.js”仅显示我的“ Header.js”组件

我安装了react-router-dom，当我启动npm时，我的应用程序已打开，但仅显示标题。有人可以帮忙吗？我不确定我在这里想念什么吗？

我的App.js

import React, { Component } from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Header from './components/Header.js';
import VehicleMake from './components/VehicleMake.js';
import VehicleModel from './components/VehicleModel.js';
import VehicleDetails from './components/VehicleDetails.js';
import AddNewVehicle from './components/AddNewVehicle.js';
import './App.css';

class App extends Component {

  render(){
    return (
      <div className="App">
      <Router>
        <Header text="Vehicle by Ivan Radunković"/>
        <Route exact path="/makes/:vehicleMake" component={VehicleMake} />
        <Route exact path="/models/:vehicleModel" component={VehicleModel}/>
        <Route exact path="/vehicle/:vehicleId" component={VehicleDetails}/>
        <Route exact path="/add" component={AddNewVehicle} />
      </Router>
      </div>
    )
}
}

export default App;

显示正确的Header.js

import '../App.css'
import React, { Component } from 'react';

class Header extends Component {

    render(){
        return(
            <header className="header">
                <div className="headerText">
                    <h1>{this.props.text}</h1>
                </div>
                    <img src="https://s.aolcdn.com/dims-global/dims3/GLOB/legacy_thumbnail/788x525/quality/85/https://s.aolcdn.com/commerce/autodata/images/USC90MBC891A021001.jpg" alt="header" className="headerImage"/>
            </header>
        )
    }
}

export default Header;

还有一个我看不到的组件。

VehicleMake.js

import React from 'react';
import { inject, observer } from 'mobx-react';
import { Link } from 'react-router-dom';

const VehicleMake = ({ VehicleStore, match, location, props}) => {
    const {
        params: { vehicleMake }
    } = match

    return (
        <>
        <Link to="/"><button className="button backButton">Back</button></Link>
        <h3 className="title">Makes</h3>
        <div className="vehiclesDiv">
            {VehicleStore.filteredVehicles.filter(vehicle => vehicle !== null && vehicle.VehicleMake === vehicleMake).map((vehicle) => (
                <div key={vehicle.id} className="vehicle">
                <img src={vehicle.image} alt="" className="listImage"/>
                <Link to={`/makes/${vehicle.VehicleMake}`} style={{ textDecoration: 'none' }}><h3 className="vehicleTitle">{vehicle.VehicleMake}</h3></Link>
                <Link to={`/models/${vehicle.VehicleModel}`} style={{ textDecoration: 'none' }}><h4 className="vehicleSubtitle">{vehicle.VehicleModel}</h4></Link>
                <Link to={`/vehicle/${vehicle.id}`} style={{ textDecoration: 'none' }}><h4 className="vehicleTitle">Details</h4></Link>
                </div>
            ))}
        </div>
        </>
    )

}

export default inject ('VehicleStore') (observer(VehicleMake))