CODEWITHSUNDEEP
reactjsreact-router
sayan paul
sayan paul

Reputation: 21

Issue with react routing, unable to debug the code and find out the issue

Here is the App.js:

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

import "bootstrap/dist/css/bootstrap.min.css";

import NavBar from "./components/navbar.component";
import ExercisesList from "./components/exercises-list.component";
import EditExercise from "./components/edit-exercise.component";
import CreateExercise from "./components/create-exercise.component";
import CreateUser from "./components/create-user.component";

function App() {
  return (
    <Router>
      <div className="container">
        <NavBar />
        <br />
        <Route path="/" component={ExercisesList} />
        <Route path="/edit/:id" component={EditExercise} />
        <Route path="/create" component={CreateExercise} />
        <Route path="/create" component={CreateUser} />
      </div>
    </Router>
  );
}

export default App;

here is Navbar component code:

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

export default class Navbar extends Component {
  render() {
    return (
      <nav className="navbar navbar-dark bg-dark never-expend-lg ">
        <Link to="/" className="navbar-brand">
          ExeriseTracker
        </Link>
        <div className="collpase navbar-collapse">
          <ul class="navbar-nav mr-auto">
            <li class="navbar-item">
              <Link to="/" className="nav-link">
                Exercises
              </Link>
            </li>
            <li className="navbar-item">
              <Link to="/create" className="nav-link">
                Create Exercise Log
              </Link>
            </li>
            <li className="navbar-iteam">
              <Link to="/user" className="nav-link">
                Create User
              </Link>
            </li>
          </ul>
        </div>
      </nav>
    );
  }
}

this a react app which has other component other then nav bar but the react routing is not working, Can any one help on this?

Also i have used some basic bootstrap code just for testing.

the result are here where im clicking one thing and it coming up with 3 statements from other 3 pages in this same page. enter image description here

Upvotes: 1

Views: 972

Answers (1)

nsmedira
nsmedira

Reputation: 78

In app.js, import Switch from react-router-dom and wrap your routes in Switch:

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
...
<Switch>
  <Route path="/" component={ExercisesList} />
  <Route path="/edit/:id" component={EditExercise} />
  <Route path="/create" component={CreateExercise} />
  <Route path="/create" component={CreateUser} />
</Switch>

Upvotes: 1

Related Questions