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

從“反應”導入反應； 將上述行添加到您的文件導航欄組件中，然后此問題已解決