javascript - 将 NavBar 组件添加到 react-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>
    )
}

标签： javascriptreactjsreact-router-dom