来自 React-router-dom 的 NavLink/Link 不起作用（空白屏幕）

Question

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

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;

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

在 chrome 上运行的 React 应用程序

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

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

至

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

一切都变成空白：

在 Chrome 上运行的 React 应用程序

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

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

Answer 1

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

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

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

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

npm update -g

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

https://nodejs.org/en/

我感谢大家的贡献。 再见

Answer 4

第二天，问题再次出现，我再次受到空白页的欢迎。

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

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

我刚刚将我的 app.js 中的导入语句从：

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

至

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

这解决了空白屏幕的问题。

应用程序.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 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

从“反应”导入反应； 将上述行添加到您的文件导航栏组件中，然后此问题已解决