'React-Router-Dom <Link /> tag is changing URL but not rendering the Component

Header Component

import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
import { ReactComponent as Logo } from "../../asset/crown.svg";

import "./header.scss";
const Header = () => {
  return (
    <div className='header'>
      <Router>
        <Link exact className='logo-container' to='/'>
          <Logo className='logo' />
        </Link>
        <div className='options'>
          <Link className='option' to='/shop'>
            SHOP
          </Link>
        </div>
      </Router>
    </div>
  );
};

export default Header;

This is my header Component in which I am using Link tag but these tags are changing the URL in the Search Bar but not actually rendering the components.

Solution 1:^[1]

You don't need the Router inside the Header Component...You can just use Link and then in your App.js setup the Route to the Component. Like So..

App.Js

import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
import { ReactComponent as Logo } from "../../asset/crown.svg";

import "./header.scss";
const Header = () => {
  return (
    <div className='header'>
    <ul>
    <li className='logo-container'> 
    <Link  to='/'>
     <Logo className='logo' />
    </Link>
    </li>
<li>   
        <Link to="/shop">
       
         
            SHOP
            </Link>
            </li>
   
     
    </div>
  );
};

export default Header;


//APP COMPONENT

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


const App = () => {
  return (
 
      <Router>
      <Switch>
          <Route exact path="/" component="Home">
      
        
          <Route path="/shop" component="shop">
        </Switch>
      </Router>
    
  );
};

export default App;

Solution 2:^[2]

Make sure not to use BrowserRoute inside BrowserRouter.

e.g: when you place a component inside a component it's not JSX there it gets converted to HTML and can cause an error.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Ultra Coder
Solution 2	Sooraj Kumar

'React-Router-Dom <Link /> tag is changing URL but not rendering the Component

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]