javascript - replacing and reloading components side menu

Question

I have created workplace 10 components and trying to get data from the workplace1 component using the side menu component.

In the side menu, I have created workplace 10 components if click workplace10th li component loading workplace component 10 but I cannot see which component had selected in the side menu

...please refer my code in this link https://codesandbox.io/s/fervent-http-ijbiz

this is workplaces component

class WorkPlace1 extends Component {
  render() {
    return (
      <div>
        <div>
          <Row>
            <Col sm={4}>
              <Worksplaces />
            </Col>
            <Col sm={5}>
              <div>Work Place 1</div>
            </Col>
          </Row>
        </div>
      </div>
    );
  }
}

this is workplace2 component

class WorkPlace2 extends Component {
  render() {
    return (
      <div>
        <div>
          <Row>
            <Col sm={4}>
              <Worksplaces />
            </Col>
            <Col sm={5}>
              <div>Work Place 2</div>
            </Col>
          </Row>
        </div>
      </div>
    );
  }
}

this is side menu component

class Home extends Component {
  render() {
    return (
      <div>
        <ul className="side-menu-ul-data">
          <NavLink exact to="/workplaces/workplace1">
            <li>Work Place 1</li>
          </NavLink>
          <NavLink exact to="/workplaces/workplace2">
            <li>Work Place 2</li>
          </NavLink>
          <NavLink exact to="/workplaces/workplace3">
            <li>Work Place 3</li>
          </NavLink>
          <NavLink exact to="/workplaces/workplace4">
            <li>Work Place 4</li>
          </NavLink>
          <NavLink exact to="/workplaces/workplace5">
            <li>Work Place 5</li>
          </NavLink>
          <NavLink exact to="/workplaces/workplace6">
            <li>Work Place 6</li>
          </NavLink>
          <NavLink exact to="/workplaces/workplace7">
            <li>Work Place 7</li>
          </NavLink>
          <NavLink exact to="/workplaces/workplace8">
            <li>Work Place 8</li>
          </NavLink>
          <NavLink exact to="/workplaces/workplace9">
            <li>Work Place 9</li>
          </NavLink>
          <NavLink exact to="/workplaces/workplace10">
            <li>Work Place 10</li>
          </NavLink>
        </ul>
      </div>
    );
  }
}

Answer 1

You render a separate instance of the side menu within every workplace page, thus each instance is unmounted upon navigation to new route and new instance is mounted. This isn't very DRY. A suggestion would be to configure your code to only ever mount/render ONE single side menu within your router, this way you avoid the unmount/mount cycle of identical components. Notice also the removal of the Switch as that doesn't allow for multiple matches (only first match as opposed to any matches).

App.jss

<Router>
  <Header />

  // top level routes
  <Route exact path="/" component={Home} />
  <Route exact path="/workplaces" component={WorkPlace1} />
  <Route exact path="/services" component={Services} />
  <Route exact path="/experiments" component={Experiments} />
  <Route exact path="/contacts" component={Contact} />

  // "nested" sub-routes
  <Row>
    <Col sm={4}>
      // always render side menu on "workplaces" sub-routes (no exact prop)
      <Route path="/workplaces">
        <SideMenu />
      </Route>
    </Col>
    <Col sm={5}>
      <Route exact path="/workplaces/workplace1" component={WorkPlace1} />
      <Route exact path="/workplaces/workplace2" component={WorkPlace2} />
      <Route exact path="/workplaces/workplace3" component={WorkPlace3} />
      <Route exact path="/workplaces/workplace4" component={WorkPlace4} />
      <Route exact path="/workplaces/workplace5" component={WorkPlace5} />
      <Route exact path="/workplaces/workplace6" component={WorkPlace6} />
      <Route exact path="/workplaces/workplace7" component={WorkPlace7} />
      <Route exact path="/workplaces/workplace8" component={WorkPlace8} />
      <Route exact path="/workplaces/workplace9" component={WorkPlace9} />
      <Route
        exact
        path="/workplaces/workplace10"
        component={WorkPlace10}
      />
    </Col>
  </Row>
</Router>

In the workplace components the table row/col is removed since the router now defines the space.

WorkPlace.jsx

class WorkPlace1 extends Component {
  render() {
    return (
      <div>Work Place 1</div>
    );
  }
}

The following codesandbox demos the above, but I think a better solution involves using a display grid and assignable grid areas as tables (rows/cols) typically aren't as responsive (though a quick peek at react-grid-system implies it is a bit flexible). Being able to assign components to grid areas removes the necessity to have the Row & Col mixed in with the router logic.