在v6+中，关键字“exact”和“strict”在NavLink上不再起作用，而是使用“end”
您不会将BrowserRouter用作导航链接，但

import {BrowserRouter as Router, Routes, Route} from 'react-router-dom
<Router>
    <Routes>
       <Route path="/home" element={<HomePage />} />
       <Route path="/page1" element={<PageOne />} />
    </Routes>
</Router>

或

import { NavLink } from 'react-router-dom'
<NavLink className={({ isActive }) => "nav-link" + (isActive ? " activated" : "")} end to="/home">
    home
</NavLink>

https://v5.reactrouter.com/web/api/BrowserRouter

第二天，这个问题又出现了，迎接我的又是一页空白。
这是我这次让它永远工作的方法。
经过大量的研究文章和反复试验，我找到了一个简单的解决方案。而且我认为这也会帮助其他人。
我刚刚在app.js中更改了import语句：

import { Router, Routes, Route } from "react-router-dom";

至

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

这修复了空白屏幕的问题。
App.js:

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import Home from "./components/pages/Home";
import About from "./components/pages/About";
import Contact from "./components/pages/Contact";

function App() {
  return (
    <>
      <Router>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </Router>
    </>
  );
}

另外，为了显示来自其他组件的文本，我使用了 element：

<Route path="/" element={<Home />} />

代替 * 组件 *：

<Route path="/" component={<Home />} />

让我向您解释一下react-router是如何工作的。您需要两个组件：路由器，它将根据您拥有的路径显示您需要的组件，以及导航栏，它将更改该路径。
让我们从路由器组件BrowserRouter开始。这是docs中的一个示例。在这里，您可以根据路径定义路由器在页面上显示的组件：

<BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}>
        <Route path="teams" element={<Teams />}>
          <Route path=":teamId" element={<Team />} />
        </Route>
      </Route>
    </Routes>
  </BrowserRouter>

现在，您需要一种导航到这些路线的方法。为此，您可以使用Link（也可以使用NavLink）：

<nav>
    <Link to="/">Home</Link>
    <Link to="/teams">Teams</Link>
  </nav>

基本上，你的错误在于你要么有一个，要么有另一个，而不是同时有两个。你需要两个都工作。

大家好，我已经找到了解决我的问题的方法。
我只是简单地将Node和NPM更新到最新版本，这似乎解决了黑屏问题。
对于npm，我只输入了命令：

npm update -g

接下来，我下载并安装了node.js的LTS版本，网址是：

https://nodejs.org/en/

感谢大家的贡献，再见

对于其他有这个问题的人来说，真实的的解决办法是你的NavBar组件应该像这样嵌套在你的BrowserRouter中：

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import Home from "./components/pages/Home";
import About from "./components/pages/About";
import Contact from "./components/pages/Contact";

function App() {
  return (
    <>
      <Router>
        <Navbar /> {/* Nested in Router */}
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </Router>
    </>
  );
}

**从“react”导入React;**将以上行添加到文件导航栏组件中，则此问题已解决

对我来说，通过观察我的问题，解决方案是把导航栏里面。如果导航栏是外面的浏览器路由器，这导致空白页面没有任何警告的问题。
这是正确的解决方案：

<BrowserRouter>
    <Navbar />
    <Routes>
      <Route path='/' element={<Home />} />
      <Route path='/about' element={<About />} />
    </Routes>
  </BrowserRouter>

这是Navbar和BrowserRouter的错误用法：

<div>
<Navbar />
  <BrowserRouter>
    <Routes>
      <Route path='/' element={<Home />} />
      <Route path='/about' element={<About />} />
    </Routes>
  </BrowserRouter>
</div>