Questions & Answers

local host getting added in prefix, when using NavLink in React router Dom for external link routing

I am trying to route to an external link using the React Router Dom 6.4. But, the problem is the local host path is getting added. Can someone confirm, why?


instead of


NavLink Code:

Getting the link through API

<div className='recipe-intro'>
    <p className='cus-type'>{ Capitalize(recipieInfo.recipe.cuisineType[0])}</p>
     target='_blank' to={{  pathname: `${recipieInfo.recipe.url}`}} 
     <NutriInfo recipieInfo = {recipieInfo} />              


Separate Component for Routes.

<div className="main-container for-routes">
      <Route index path='/' element = {<LandingPage />} />

React Hashrouter:

Using Hashrouter from React router dom

           <App />

2023-01-17 00:46:56
react-router-dom NavLink component doesn't handle external links; it's used only to navigate to pages your app is rendering routes for. If you want or need to link to an external resource then use a regular anchor (<a href>) tag element.
Answers(0) :