CODEWITHSUNDEEP
javascripthtmlreactjs
Musthafa
Musthafa

Reputation: 632

Navigation is not working in ReactJS web app

enter image description hereI'm creating a web application using the ReactJS framework. I have added the bootstrap Navbar component as navigation of my website. But I'm not able to navigate through the pages using href attribute. 

import React from 'react';
import './Navbar.css';
import Linux from './Linux'


function Navbar(){
    return(
        <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
  <a className="navbar-brand" href="#">Learn to Code</a>
  <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span className="navbar-toggler-icon"></span>
  </button>

  <div className="collapse navbar-collapse" id="navbarSupportedContent">
    <ul className="navbar-nav mr-auto">
      <li className="nav-item active">
        <a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
      </li>
      <li className="nav-item">
        <a className="nav-link" href="">Development</a>
      </li>
      <li className="nav-item">
        <a className="nav-link" href="./Linux">Linux</a>
      </li>

I have tried using react-router-dom. How can I navigate to other pages in react application?

This is how I have added the react-router-dom Link method.

import Link from 'react-router-dom';

<li className="nav-item">
        <Link to='/Linux'></Link>
</li>

Then I was getting following error: Attempted import error: 'react-router-dom' does not contain a default export (imported as 'Link').

Upvotes: 0

Views: 3252

Answers (2)

selmanbey
selmanbey

Reputation: 338

Attempted import error: 'react-router-dom' does not contain a default export (imported as 'Link')

As this error tells you, Link is not the default export of 'react-router-dom'. You'll need to use object destructuring to be able to import it:

import { Link } from 'react-router-dom'

Upvotes: 1

tareq aziz
tareq aziz

Reputation: 777

You may follow this post, here I try to give a little more detail idea about how navigation works and how to write code for that. Hope it will help you

Upvotes: 1

Related Questions