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

CodePudding user response：

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.

CodePudding user response：

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

CodePudding user response：

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