Javascript 添加一个NavBar组件来响应路由器DOM文件的外部切换，这样我的内容就不会呈现

我正在开发一个应用程序，当我用导航条创建前端路线时，我总是什么都不做。下面是我以前制作的一个应用程序的代码片段：

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

从“React”导入React
从“react router dom”导入{BrowserRouter，Switch，Route}
从“./components/HomeComponents/HomeContainer”导入HomeContainer
从“./components/UniversalComponents/NavBar”导入导航栏
从“./components/CreateComponents/CreateContainer”导入CreateContainer
从“./components/ReadComponents/ReadContainer”导入ReadContainer
从“./components/ProfileComponents/ProfileContainer”导入ProfileContainer
常数路由器=（）=>{
返回(
)
}
导出默认路由器

这将正确显示所有不同路线上方的导航栏

现在，当我在我当前的项目上以同样的方式进行时：

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

从“React”导入React
从“react router dom”导入{BrowserRouter，Switch，Route}
从“./App”导入应用程序
从“./components/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>
    )
}

从“React”导入React
从“react router dom”导入{NavLink}
导出默认函数NavBar（）{
返回(
家
画廊
接触
)
}

NavBar组件中有什么？@JulienRioux现在它只是一个带有跨距而不是链接的占位符，它是一个

，其中有三个

，每个都有不同的内容（主页、图库、联系人），很难看到发生了什么。如果您创建了一个codesandbox示例（），我将查看并修复它@谢谢你！巴贝尔有一个更大的问题，在解决这个问题时，我意外地解决了这个问题，不知道怎么解决！如果我弄明白了，我会把它寄出去的