NavLink/Link 来自 React-router-dom 不工作（黑屏）

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;

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

React App running on chrome

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

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

到

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

一切都变成空白：

React app running on Chrome

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

请帮助我看了不同的文章，但我想不出一个解决方案

Answer 1

让我向您解释一下 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 2

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

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

我只是将 node 和 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";

这解决了黑屏问题。

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

同时显示其他组件的文本我使用了元素:

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

而不是分量:

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

NavLink/Link 来自 React-router-dom 不工作（黑屏）

NavLink/Link from React-router-dom not working (blank screen)

reactjs

react-router