CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-dom
Sameer Katija
Sameer Katija

Reputation: 108

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.

Upvotes: 0

Views: 512

Answers (2)

Sooraj Kumar
Sooraj Kumar

Reputation: 13

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.

Upvotes: 0

Ultra Coder
Ultra Coder

Reputation: 26

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;

Upvotes: 1

Related Questions