При добавлении компонента NavBar к файлу реакции-router-DOM внешний переключатель не приводит ни к одному из моих материалов

Question

Я работаю над приложением, и когда я создаю свои внешние интерфейсы с помощью навигационной панели, как я всегда ничего не делаю, рендерится.Вот фрагмент кода из предыдущего приложения, которое я сделал:

import React from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom'
import HomeContainer from './components/HomeComponents/HomeContainer'
import NavBar from './components/UniversalCompnents/NavBar'
import CreateContainer from './components/CreateComponents/CreateContainer'
import ReadContainer from './components/ReadComponents/ReadContainer'
import ProfileContainer from './components/ProfileComponents/ProfileContainer'

const Router = () => {
  return (
    <BrowserRouter>
      <NavBar />
      <Switch>
        <Route exact path="/" component={HomeContainer} />
        <Route exact path="/create" component={CreateContainer} />
        <Route exact path="/profile/:id" component={ProfileContainer} />
        <Route exact path="/read/:id" component={ReadContainer} />
      </Switch>
    </BrowserRouter>
  )
}

export default Router

это корректно отображает мою навигационную панель над всеми моими различными маршрутами.

Теперь, когда я делаю это таким же образом на моем текущемпроект:

import React from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom'
import App from './App'
import NavBar from './components/NavBar'



const Router = () => {
    return (
        <BrowserRouter>
            <NavBar/>
            <Switch>
                <Route exact path="/" component={App} />
            </Switch>
        </BrowserRouter>
    )
}

export default Router

, пока есть строка <NavBar/> (или любой другой код), страница отображается пустой, и я не получаю ошибок.Что я делаю по-другому, чего не вижу?

Заранее спасибо

Редактировать:

<NavBar/> компонент:

import React from 'react'
import { NavLink } from 'react-router-dom'

export default function NavBar() {
    return (
        <nav style={{ height: "10vh", width: "100vw", backgroundColor: "black", color: "white", display: 'flex', justifyContent: 'space-evenly', alignItems: 'center' }}>
            <NavLink to="/" style={{ width: '20vw' }}>Home</NavLink>
            <NavLink to="/gallery" style={{ width: '20vw' }}>Gallery</NavLink>
            <NavLink to="/contact" style={{ width: '20vw' }}>Contact</NavLink>
        </nav>
    )
}