Маршруты React не показывают мои компоненты. Показан только один компонент, другие нет

Question

У меня есть компоненты, которые я хочу показать в своем приложении. Но только мой компонент "Header. js" отображается в "App. js"

response-router-dom установлен, когда i npm start мое приложение открыто, но отображается только заголовок , Может кто-нибудь, пожалуйста, помогите? Я не уверен, что мне здесь не хватает?

Мое приложение. 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;

Заголовок. 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))

Answer 1

Перемещение <Header.. вне <Router>

<Header text="Vehicle by Ivan Radunković"/>
<Router>  
  <Route exact path="/makes/:vehicleMake" component={VehicleMake} />
  ...

Answer 2

Где находится ваш провайдер? Не могли бы вы показать это?