menu

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?

localhost:3000/#/http://www.saveur.com/article/Recipes/

instead of

just: http://www.saveur.com/article/Recipes/

NavLink Code:

Getting the link through API


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

Routing:

Separate Component for Routes.


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

React Hashrouter:

Using Hashrouter from React router dom


<React.StrictMode>
    <HashRouter>
       <Level1Boundary>
           <App />
       </Level1Boundary>
    </HashRouter>
</React.StrictMode>

Comments:
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) :