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

Question

Hi guys I was starting out on React and came across this problem, this is my Navbar component:

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

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

    export default Navbar;

and this is my 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;

when I run the code this is what happens:

React App running on chrome

Also the link is not clickable nor has an underline like when using a simple tag And what's even worse is that if I change the import statement in my Navbar.js from:

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

to

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

everything goes blank:

React app running on Chrome

my react-router-dom version is "^6.3.0"

please help I have seen different articles and I couldn't come up with a solution

Answer 1

in v6+ keywords "exact" and "strict" don't work anymore on NavLink, instead put "end"

you don't use BrowserRouter as a navlink but

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

or

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

Let me explain to you a bit how react-router works. There are 2 components you need: the router that will show the component you want, depending on the path you have, and the navbar, which will change that path.

Let's start with the router component, BrowserRouter. This is an example from docs. In here, you define what components the router to show on your page, depending on the path:

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

Now, you need a way to navigate to these routes. For that, you can use Link (should work with NavLink as well):

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

Basically, your mistake is that you either have one or the other, not both at the same time. You need both to work.

Answer 3

Hello everyone I have found a solution to my problem.

I simply updated node and npm to the latest version and that seemed to resolve the blank screen issue.

for npm I just typed in the command:

npm update -g

Next I downloaded and installed the LTS version of node.js from:

https://nodejs.org/en/

I thank everyone for their contribution. Bye

Answer 4

The following day the issue arose again and I was greeted with the blank page yet again.

Here is what I did to get it working for good this time.

after a lot of researching articles and trial and error, I found a simple solution. And I think this will help others as well.

I just changed the import statement in my app.js from:

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

to

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

This fixed the issue of the blank screen.

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

also for the texts from other components to appear I used element :

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

instead of component :

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

Answer 5

For others having this issue the real fix is that your NavBar component should be nested within your BrowserRouter like so:

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

import React from "react"; Add the above line to your file Navbar component then this issue resolved