Navigation is not working in ReactJS web app

0
votes

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').

2
javascripthtmlreactjs
I have tried react-router-dom but it wasn't working – Musthafa
can you show what have you tried using react-router-dom also by using href /Linux do you mean to load new page on that url or are you intending to open component instead – Rikin
I have added react-router-dom code – Musthafa
Thanks for clarifying, it seems you need understand how to react router in first place, you can get that info from their website or following tutorials, it will save you bunch of time down the road on understanding proper usage. – Rikin

2 Answers

1
votes

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

1
votes

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'