CODEWITHSUNDEEP
javascripthtmlcssreactjsreact-router
Marvelous Ikechi
Marvelous Ikechi

Reputation: 2043

Nav bar doesn't display when I use the <Link> tag

I changed the anchor tag to the Link tag and the whole component doesn't display. It is note worthy that I had used the anchor tag and it was properly rendered. However, after changing to the Link tag nothing gets displayed again. Below is what my code looks like:

Navbar component

import React, {Component} from 'react';
import { Link } from 'react-router';


class Navbar extends Component {
    render() {
        return (
        <div className="Navbar">
            <ul className="navbar-list">
                <li className="active"><Link to={"/home"}>Home</Link></li>
                <li><Link to={"/about"}>About Us</Link></li>
                <li><Link to={"/pricing"}>Pricing</Link></li>
            </ul>
        </div>
    )
    }
}


export default Navbar

css

.navbar-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background-color: #333;

}

.navbar-list li{
float: left;
}

.navbar-list li Link {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navbar-list li Link:hover{
  background-color: #111 ;
}

.active {
  background-color: #4CAF50;
}

App.js file

class App extends Component {
  render() {
    return (
      <div className="App">
        <Navbar />
      </div>
    );
  }
}

export default App;

Upvotes: 0

Views: 62

Answers (2)

KushalSeth
KushalSeth

Reputation: 4729

There is some issue in Link from react-router Instead try using 

import { NavLink } from 'react-router-dom';

You code will look like this:

in dependencies of your package.json and do npm i: include: 

    "react-router-dom": "5.0.0",

import { BrowserRouter as Router } from "react-router-dom";

class App extends Component {
  render() {
    return (
      <div className="App">
<Router>
        <Navbar />
<Router>
      </div>
    );
  }
}

export default App;

import React, { Component } from 'react';

import { NavLink } from 'react-router-dom';


class Navbar extends Component {

    render() {
        return (

            <div className="Navbar">
                <ul className="navbar-list">
                    <li className="active"><NavLink to={"/home"}>Home</NavLink></li>
                    <li><NavLink to={"/about"}>About Us</NavLink></li>
                    <li><NavLink to={"/pricing"}>Pricing</NavLink></li>
                </ul>
            </div>

        )
    }
}


export default Navbar;

Upvotes: 1

Dvandy
Dvandy

Reputation: 61

Maybe you can try to change To prop on string like this : 

<Link to="/pricing">Pricing</Link>

Another thing u can try is install react-router-dom instead of react-router.

Upvotes: 0

Related Questions