Ссылка на измененный URL, но не предоставленный компонент

Question

Мы пытаемся сделать простой сайт с использованием React-redux. Мы планируем иметь боковую панель следующим образом. При нажатии на ссылку «/ addcourses» URL-адрес изменяется, но он не отображает новый компонент. Если я обновляю страницу, она отображается правильно. Я прочитал пару блогов, в которых говорится, что не следует использовать чистые компоненты. Мы их не используем. Один блог предлагает "https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md" предлагает передать местоположение. Не совсем уверен, как это сделать. Любая помощь будет принята с благодарностью. Большое спасибо заранее. Вот мой sidebar.jsx:

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

class Sidebar extends Component {



 state = {};
 render() {
    return (
      <Router>
        <div style={{ display: "flex" }}>
          <div
            style={{
              padding: "10px",
              width: "40%",
              background: "#f0f0f0"
            }}
          >
            <ul style={{ listStyleType: "none", padding: 0 }}>
              <li>
                <Link to="/dashboard">Home</Link>
              </li>
              <li>
                <Link to="/addcourses">Courses</Link>
              </li>
              <li>
                <Link to="/payment">Payment</Link>
              </li>
            </ul>
          </div>
        </div>
      </Router>
    );
  }
}

export default Sidebar;

В моем App.js я делаю следующее:

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Router>
          <div className="App">
            <Navbar />
            <Route exact path="/" component={LandingPage} />
            {/* <div className="container-fluid"> */}
            <React.Fragment>
              <Route exact path="/verify" component={EmailVerification} />
              <Route exact path="/register" component={Register} />
              <Route exact path="/login" component={Login} />
              <Switch>
                <PrivateRoute exact path="/dashboard" component={Dashboard} />
              </Switch>
              <Switch>
                <PrivateRoute
                  exact
                  path="/addcourses"
                  component={AddSwapDeleteWrapper}
                />
              </Switch>
              <Switch>
                <PrivateRoute
                  exact
                  path="/payment"
                  component={Payment}
                />
              </Switch>
              {/* </div> */}
            </React.Fragment>
            <Footer />
          </div>
        </Router>
      </Provider>
    );
  }
}

export default App;

Answer 1

Если вы нажмете на <Link>, событие будет отправлено на вмещающую <Router>, которая вызовет обновление состояния, и отобразится <Route>, на который указывает ссылка. Если вы добавите два <Router> s, внутренний обработает событие, а внешний не обновится. Поэтому удалите внутренний Router, чтобы он заработал.