Навигационная ссылкаact-route-dom изменяет маршрут URL, но не отображает компонент. Но если мы перезагрузим этот маршрут, он работает.

Код Navbar

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 }) ={amp}gt; { if (user) { for (var a in user) { if (a === "user") { user = user[a]; } } } return ( {amp}lt;nav className="navbar navbar-expand-lg navbar-dark bg-primary"{amp}gt; {amp}lt;BrowserRouter{amp}gt; {amp}lt;Link className="navbar-brand" to="/"{amp}gt; Users UI {amp}lt;/Link{amp}gt; {amp}lt;button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation" {amp}gt; {amp}lt;span className="navbar-toggler-icon" /{amp}gt; {amp}lt;/button{amp}gt; {amp}lt;div className="collapse navbar-collapse" id="navbarNavAltMarkup"{amp}gt; {amp}lt;div className="navbar-nav" style={{ cursor: "pointer" }}{amp}gt; {user {amp}amp;{amp}amp; ( {amp}lt;React.Fragment{amp}gt; {amp}lt;a className="nav-item nav-link" href={`/user/${user._id}`}{amp}gt; {"Edit Profile Mr."   user.name} {amp}lt;/a{amp}gt; {amp}lt;a className="nav-item nav-link" href="/logout"{amp}gt; Logout {amp}lt;/a{amp}gt; {amp}lt;/React.Fragment{amp}gt; )} {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/BrowserRouter{amp}gt; {amp}lt;/nav{amp}gt; ); }; const mapStateToProps = state ={amp}gt; ({ currentUser: state.user.currentUser }); 

код app.js

 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 ( {amp}lt;React.Fragment{amp}gt; {amp}lt;NavBar /{amp}gt; {amp}lt;main className="container"{amp}gt; {amp}lt;Switch{amp}gt; {amp}lt;Route exact path="/login" component={LoginForm} /{amp}gt; {amp}lt;ProtectedRoute path="/user/:id" component={AddUser} /{amp}gt; {amp}lt;ProtectedRoute exact path="/" component={User} /{amp}gt; {amp}lt;ProtectedRoute exact path="/logout" component={Logout} /{amp}gt; {amp}lt;Route path="/not-found" component={NotFound} /{amp}gt; {amp}lt;Redirect to="/not-found" /{amp}gt; {amp}lt;/Switch{amp}gt; {amp}lt;/main{amp}gt; {amp}lt;/React.Fragment{amp}gt; ); } } 

избыточный код

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

код index.js

 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( {amp}lt;Provider store={store}{amp}gt; {amp}lt;Router{amp}gt; {amp}lt;App /{amp}gt; {amp}lt;/Router{amp}gt; {amp}lt;/Provider{amp}gt;, 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(); 

Удалите BrowserRouter из компонента NavBar .

Link и switch должны быть заключены в тот же Router , который вы уже указали в {amp}lt;App/{amp}gt; . Link внутри BrowserRouter (из NavBar ) не имеет соответствующего switch , поэтому страница не меняется.