NavLink or Link inside the nav of react-router-DOM is updating the URL .But it is not updating the component

Question

Nav link of react-route-dom changes the route of the Url but doesn't render the component. But if we reload that route, it works.

Navbar code

import React from "react";
import { connect } from "react-redux";
import compose from "compose";
import { Link, NavLink, BrowserRouter, withRouter } from "react-router-dom";

const NavBar = ({ currentUser: user }) => {

  if (user) {
    for (var a in user) {
      if (a === "user") {
        user = user[a];
      }
    }
  }

  return (
    <nav className="navbar navbar-expand-lg  navbar-dark bg-primary">
      <BrowserRouter>
        <Link className="navbar-brand" to="/">
          Users UI
        </Link>
        <button
          className="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarNavAltMarkup"
          aria-controls="navbarNavAltMarkup"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >

          <span className="navbar-toggler-icon" />
        </button>
        <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div className="navbar-nav" style={{ cursor: "pointer" }}>
            {user && (
              <React.Fragment>
                <a className="nav-item nav-link" href={`/user/${user._id}`}>
                  {"Edit Profile Mr." + user.name}
                </a>
                <a className="nav-item nav-link" href="/logout">
                  Logout
                </a>
              </React.Fragment>
            )}
          </div>
        </div>
      </BrowserRouter>
    </nav>
  );
};

const mapStateToProps = state => ({
  currentUser: state.user.currentUser
});

app.js code

import React, { Component } from "react";
import { Switch, Route, Redirect, } from "react-router-dom";
import { connect } from "react-redux";
import auth from "./services/authService";
import ProtectedRoute from "./components/common/protectedRoute";
import NavBar from "./components/navBar";
import NotFound from "./components/notFound";
import LoginForm from "./components/login";
import Logout from "./components/logout";
import AddUser from "./components/addUser";
import User from "./components/user";
import { setCurrentUser } from "./Redux/user/user-action";
import "./App.css";

class App extends Component {
  state = {};
  componentDidMount() {
    const { setCurrentUser } = this.props;
    const user = auth.getCurrentUser();

    setCurrentUser({ user });
  }
  render() {
    return (
      <React.Fragment>
          <NavBar />
          <main className="container">
            <Switch>
              <Route exact path="/login" component={LoginForm} />
              <ProtectedRoute path="/user/:id" component={AddUser} />
              <ProtectedRoute exact path="/" component={User} />
              <ProtectedRoute exact path="/logout" component={Logout} />
              <Route path="/not-found" component={NotFound} />
              <Redirect to="/not-found" />
            </Switch>
          </main>
      </React.Fragment>
    );
  }
}

redux code

const mapDispatchToProps = dispatch => ({
  setCurrentUser: user => dispatch(setCurrentUser(user))
});
export default connect(null, mapDispatchToProps)(App);

index.js code

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";
import { Provider } from "react-redux";
import store from "./Redux/store";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <App />
    </Router>
  </Provider>,
  document.getElementById("root")
);
/*
 If you want your app to work offline and load faster, you can change
 unregister() to register() below. Note this comes with some pitfalls. */

serviceWorker.unregister();

Amruta Amruta · Accepted Answer · 2019-12-23T10:05:46

Remove the BrowserRouter from the NavBar component.

The Link and the switch must be wrapped in the same Router, which you have already provided around <App/>. The Link inside BrowserRouter( fromNavBar) doesn't have a corresponding switch, that is why the page doesn't change.

NavLink or Link inside the nav of react-router-DOM is updating the URL .But it is not updating the component

1 Answers