Link to changed URL but not rendered component

1382 views javascript
9

We are trying to make a simple website using React-redux. We plan to have a sidebar as follows. When clicking on the "/addcourses"link, the URL changes, but it is not rendering the new component. If I refresh the page, it renders correctly. I read couple of blogs that says not to use Purecomponents. We are not using them. One blog suggests "https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md" suggests to pass the location. Not exactly sure how to do that. Any help would be greatly appreciated. Thanks a lot in advance. Here is my 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;

In my App.js I'm doing the following:

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;

answered question

Try removing the <Router> from the sidebar.

It worked. Thank you so much. You rock!!

1 Answer

8

If you click on a <Link>, the event will be sent to the enclosing <Router>, which will trigger a state update and the <Route> the link is pointing to gets displayed. If you add two <Router>s, the inner one will process the event, and the outer one won't update. Therefore remove the inner Router to get it working.

posted this

Have an answer?

JD

Please login first before posting an answer.