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.

Source: Ask Javascript Questions

LEAVE A COMMENT