Replacing And Reloading Components Side Menu

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 component

Solution 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<Routeexactpath="/"component={Home} /><Routeexactpath="/workplaces"component={WorkPlace1} /><Routeexactpath="/services"component={Services} /><Routeexactpath="/experiments"component={Experiments} /><Routeexactpath="/contacts"component={Contact} />// "nested" sub-routes<Row><Colsm={4}>
      // always render side menu on "workplaces" sub-routes (no exact prop)
      <Routepath="/workplaces"><SideMenu /></Route></Col><Colsm={5}><Routeexactpath="/workplaces/workplace1"component={WorkPlace1} /><Routeexactpath="/workplaces/workplace2"component={WorkPlace2} /><Routeexactpath="/workplaces/workplace3"component={WorkPlace3} /><Routeexactpath="/workplaces/workplace4"component={WorkPlace4} /><Routeexactpath="/workplaces/workplace5"component={WorkPlace5} /><Routeexactpath="/workplaces/workplace6"component={WorkPlace6} /><Routeexactpath="/workplaces/workplace7"component={WorkPlace7} /><Routeexactpath="/workplaces/workplace8"component={WorkPlace8} /><Routeexactpath="/workplaces/workplace9"component={WorkPlace9} /><Routeexactpath="/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

classWorkPlace1extendsComponent {
  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.

Solution 2:

You have to save the state of current active workplace when user clicks on the link. And then using the state value you can add active class on each <li>element. Your side menu component should look like this:

classHomeextendsComponent{
   state = {
      activeWorkPlace: 1,
   }

   setActiveWorkplace = (activeWorkPlace) => {this.setState({activeWorkPlace})};

  render() {
      return (
        <div>
           <ul className="side-menu-ul-data">
           <NavLink onClick={this.setActiveWorkplace.bind(this, 1)}  exact to="/workplaces/workplace1">
              <li className={this.state.activeWorkPlace === 1? 'active': ''}>Work Place 1</li>
           </NavLink>
           <NavLink onClick={this.setActiveWorkplace.bind(this, 2)} exact to="/workplaces/workplace2">
              <li className={this.state.activeWorkPlace === 2? 'active': ''}>Work Place 2</li>
      </NavLink>
           <NavLink onClick={this.setActiveWorkplace.bind(this, 3)} exact to="/workplaces/workplace3">
              <li className={this.state.activeWorkPlace === 3? 'active': ''}>Work Place 3</li>
      </NavLink>
           <NavLink onClick={this.setActiveWorkplace.bind(this, 4)} exact to="/workplaces/workplace4">
               <li className={this.state.activeWorkPlace === 4? 'active': ''}>Work Place 4</li>
      </NavLink>
            <NavLink onClick={this.setActiveWorkplace.bind(this, 5)} exact to="/workplaces/workplace5">
               <li className={this.state.activeWorkPlace === 5? 'active': ''}>Work Place 5</li>
      </NavLink>
           <NavLink onClick={this.setActiveWorkplace.bind(this, 6)} exact to="/workplaces/workplace6">
               <li className={this.state.activeWorkPlace === 6? 'active': ''}>Work Place 6</li>
      </NavLink>
            <NavLink onClick={this.setActiveWorkplace.bind(this, 7)} exact to="/workplaces/workplace7">
               <li className={this.state.activeWorkPlace === 7? 'active': ''}>Work Place 7</li>
      </NavLink>
           <NavLink onClick={this.setActiveWorkplace.bind(this, 8)} exact to="/workplaces/workplace8">
                <li className={this.state.activeWorkPlace === 8? 'active': ''}>Work Place 8</li>
      </NavLink>
          <NavLink onClick={this.setActiveWorkplace.bind(this, 9)} exact to="/workplaces/workplace9">
              <li className={this.state.activeWorkPlace === 9? 'active': ''}>Work Place 9</li>
      </NavLink>
           <NavLink onClick={this.setActiveWorkplace.bind(this, 10)} exact to="/workplaces/workplace10">
               <li  className={this.state.activeWorkPlace === 10? 'active': ''}>Work Place 10</li>
      </NavLink>
    </ul>
  </div>
);

} }

And add this style to your style.css file:

.active {
    color: red;
}

That should solve your problem.