0

enter image description hereI have completely installed my react router and my project is build completely but the only issue is that when I imported this

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

Import in App.js enter image description here

Import in Navbar.js enter image description here

the Link is in light color in vs code compared to others that means that means it is not imported and thus I cannot replace anchor tag and href with Link to="". Anyone can please help with the solution because without these I cannot continue further.

Sheth Firoz
  • 1
  • 2
  • I don't see an issue with the code. Are there any actual errors or linting errors? The `Link` is a common component, so there shouldn't have been any way for you to install an incorrect version of `react-router-dom`. What exactly does "is in light color in vs code compared to others that means that means it is not imported" mean? Can you share a screenshot? Sometimes, depending on your theme, different object types/references are colored differently... it doesn't mean they weren't imported correctly. – Drew Reese Nov 30 '22 at 06:42
  • is your react-router-dom version is 5 ? – NAZIR HUSSAIN Nov 30 '22 at 06:43
  • yes 5.2.0 and react-dom is 18.2.0 – Sheth Firoz Nov 30 '22 at 06:46
  • Well, with those versions of RRD (v5.2.0) and React (v18), if you are rendering the app into a `React.StrictMode` component you'll have issues with the router/links. See my answer [here](/a/71833424/8690857) for issue and solution. This is separate from any issue you are reporting here. – Drew Reese Nov 30 '22 at 06:49
  • I have attached the screenshot – Sheth Firoz Nov 30 '22 at 06:50
  • From what I can tell that looks more like an unused import in the screenshot. Are you rendering a `Link` component anywhere there in the file? You can edit the post to include a complete [mcve] for that file. – Drew Reese Nov 30 '22 at 06:50
  • I attached one more screenshot where I have shown that I have used the link component – Sheth Firoz Nov 30 '22 at 06:53
  • Ok, you've imported the `Link` component into two different files. The import in `Navbar` is normal since it's actually rendering a `Link`. I think you've just an unused import in the `App.js` file. – Drew Reese Nov 30 '22 at 06:54
  • Is there any correction that I need to do ? – Sheth Firoz Nov 30 '22 at 06:54
  • Delete `App.js:13` since it seems you're not using that imported `Link` component in that file. – Drew Reese Nov 30 '22 at 06:55
  • But I want to use that Link in react and the issue is that when I can keeping anchor tag and href the component gets loaded but it doesnt get loaded when I replace it with link – Sheth Firoz Nov 30 '22 at 06:57
  • {props.aboutText} – Sheth Firoz Nov 30 '22 at 06:58
  • I added this and now its not loading the component but when i do so with the anchor tag then it dos – Sheth Firoz Nov 30 '22 at 06:58
  • Added *what*? This would all probably be easier if you could add `App.js` to your post as a [mcve] so we can see what it's importing and rendering. – Drew Reese Nov 30 '22 at 06:59
  • I added ss of App.js – Sheth Firoz Nov 30 '22 at 07:03
  • The screenshot isn't the entire code though. All the screenshot shows is that you've imported `Link` and very likely are not using it. It's not an error and your code is probably transpiling and running, right? If you are not rendering `Link` anywhere in `App` then remove the import. If you are trying to render a `Link`, then please share a complete code example. If there are errors in the terminal or console, please include those. – Drew Reese Nov 30 '22 at 07:08
  • Sir actually I am new to stackoverflow so I am not able to find how to upload complete code , can we connect somewhere where u r comfortable? Thank u for giving ur time by the way – Sheth Firoz Nov 30 '22 at 07:12
  • It's the same as where you included the import example; create a code snippet using the three backtick characters and copy/paste the complete `App.js` code inside. – Drew Reese Nov 30 '22 at 07:23
  • Ok so my issue is that I have removed the link from that router but the main problem is in the latest image that I am inserting right now in that image I gave a routing path for eg. about. But when I click on that about in the website the url changes to about but the component doesnt get loaded – Sheth Firoz Nov 30 '22 at 15:19

2 Answers2

0

Close the Link tag in Navbar.js

in line 9 of Navbar.js

<Link className="navbar-brand" to="/"><Link>

and in line 16 of Navbar.js

<Link className="nav-link active" aria-current="page to="/"><Link>
Sanay Varghese
  • 69
  • 2
0

The Link module imported in App.js is not yet used that's why it is in light color.

ProTip: If you are not using Link module in App.js, just remove the import

Sanay Varghese
  • 69
  • 2