CODEWITHSUNDEEP
reactjs
Vamsi
Vamsi

Reputation: 151

I created one react project and I started working on Routing, Routing is working fine but Navbar is not working properly

! [My Output is shown like this. ]1. I created one react project, and for designing I am using Bootstrap framework. I am done routing in my project. Routing is working fine, But Navbar is not working properly in my react project. So help me to resolve this issue.

This is App.js

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Home from './Pages/Home/Home';
import Edit from './Pages/Edit/Edit';
import Create from './Pages/Create/Create';
import Navbar from './Components/Navbar/Navbar';

function App() {
  return (
    <Router>
      <Navbar></Navbar>
      <div className="container">
        <h2>MERN</h2>
        <Route path='/' exact component={Home}></Route>
        <Route path='/id:/edit' component={Edit}></Route>
        <Route path='/create' component={Create}></Route>
      </div>
    </Router>
  );
}

export default App;

In Components Folder, I have Navbar folder, I Navbar folder I have Navbar.js

In Navbar.js

import React, { Component } from "react";
import "./Navbar.css";
import { Link } from "react-router-dom";

export default class Navbar extends Component {
  render() {
    return (
      <div>
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <a className="navbar-brand" href="www.facebook.com">
            Navbar
          </a>
          <button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarNav">
            <ul className="navbar-nav">
              <li className="nav-item active">
                <Link to="/">Home</Link>
              </li>
              <li className="nav-item">
                <Link to="/create">Create</Link>
              </li>
              <li className="nav-item">
                <Link to="/id:/edit">Edit</Link>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    );
  }
}

In Pages Folder I have three folders 1)Home 2)Create 3)Edit

This is Home.js

import React, { Component } from "react";
import "./Home.css";

export default class Home extends Component {
  render() {
    return (
      <div>
        <p>Welcome to Home Component</p>
      </div>
    );
  }
}

This is Create.js

import React, { Component } from "react";

export default class Create extends Component {
  render() {
    return (
      <div>
        <p>Welcome to Create Component</p>
      </div>
    );
  }
}

This is Edit.js

import React, { Component } from "react";

export default class Edit extends Component {
  render() {
    return (
      <div>
        <p>Welcome to Edit Component</p>
      </div>
    );
  }
}

In my react project Routing is working fine, but Navbar is not working properly. If I am not clear with my doubt please put a comment.

Upvotes: 0

Views: 55

Answers (3)

SuleymanSah
SuleymanSah

Reputation: 17858

Actually you just forgot to add the necessary className to your Links. Add className="nav-link" to Links in Navbar.js.

    <ul className="navbar-nav">
      <li className="nav-item active">
        <Link to="/" className="nav-link">
          Home
        </Link>
      </li>
      <li className="nav-item">
        <Link to="/create" className="nav-link">
          Create
        </Link>
      </li>
      <li className="nav-item">
        <Link to="/id:/edit" className="nav-link">
          Edit
        </Link>
      </li>
    </ul>

Upvotes: 1

kcygan
kcygan

Reputation: 66

Have you tried adding the Switch component around all of your <Route> components?

You can find a similar example to what you are trying to achieve here in the first basic example.

Try:

<Router>
      <Navbar></Navbar>
      <div className="container">
        <h2>MERN</h2>
        <Switch>
            <Route path='/' exact component={Home}></Route>
            <Route path='/id:/edit' component={Edit}></Route>
            <Route path='/create' component={Create}></Route>
        </Switch>
      </div>
    </Router>

Upvotes: 1

Dhananjai Pai
Dhananjai Pai

Reputation: 6015

I am assuming by not-working properly, the "active" class is not changing.

For this you can use "NavLink" instead of "Link" from the react-router-dom package and do not hardcode the "active" class to the <li>

import { NavLink } from 'react-router-dom';
...
                            <li className="nav-item">
                                <NavLink to='/' activeClassName="active">Home</NavLink>
                            </li>
                            <li className="nav-item">
                                <NavLink to='/create' activeClassName="active">Create</NavLink>
                            </li>
                            <li className="nav-item">
                                <NavLink to='/id:/edit' activeClassName="active">Edit</NavLink>
                            </li>
...

Upvotes: 0

Related Questions