React-router-dom 的 NavLink/Link 不起作用（黑屏）

Question

大家好，我刚开始使用 React 时遇到了这个问题，这是我的导航栏组件：

import { BrowserRouter as NavLink } from "react-router-dom";

    const Navbar = () => {
      return (
        <>
          <NavLink as={NavLink} exact to="/">
            Hello
          </NavLink>
        </>
      );
    };

    export default Navbar;

这是我的 App.js：

    import "./App.css";
    import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
    import Navbar from "./Components/Navbar";
    
    const App = () => {
      return <Navbar />;
    };

    export default App;

当我运行代码时，会发生以下情况：

此外，该链接不可点击，也不像使用简单标签时那样有下划线 更糟糕的是，如果我将 Navbar.js 中的导入语句更改为：

import { BrowserRouter as NavLink } from "react-router-dom";

到

import { NavLink } from "react-router-dom";

一切都变成空白：

我的react-router-dom版本是“^6.3.0”

请帮助我看过不同的文章，但我无法想出解决方案

Answer 1

第二天，问题再次出现，我再次看到空白页面。

这就是我这次为让它正常工作所做的事情。

经过大量研究文章和反复试验，我找到了一个简单的解决方案。我认为这也会对其他人有所帮助。

我刚刚将 app.js 中的导入语句更改为：

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 />} />

Answer 2

让我向你解释一下react-router是如何工作的。您需要 2 个组件：将根据您拥有的路径显示您想要的组件的路由器，以及将更改该路径的导航栏。

让我们从路由器组件 BrowserRouter 开始。这是文档中的示例。在这里，您可以根据路径定义路由器在页面上显示哪些组件：

<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>

基本上，你的错误是你要么拥有其中之一，而不是同时拥有两者。两者都需要才能工作。

Answer 3

在 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

Answer 4

大家好，我已经找到了解决我的问题的方法。

我只是将 node 和 npm 更新到最新版本，这似乎解决了黑屏问题。

对于 npm，我刚刚输入了命令：

npm update -g

接下来我从以下位置下载并安装了 Node.js 的 LTS 版本：

https://nodejs.org/en/

感谢大家的贡献。再见

Answer 5

对于其他遇到此问题的人，真正的解决方法是您的 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>
    </>
  );
}

Answer 6

从“react”导入React； 将以上行添加到您的文件导航栏组件中，然后此问题就解决了

Answer 7

对我来说，通过观察我的问题，解决方案是将导航栏放在里面。如果导航栏位于浏览器路由器之外，则会导致空白页面，并且没有任何有关该问题的警告。

这是正确的解决方案：

<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>

Answer 8

你应该像这样使用 Router 将 jsx 包装在应用程序组件中

import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navbar from "./Components/Navbar";

const App = () => {
  return (<Router>
            <Navbar />
          </Router>
         );
};

export default App;