reactjs : sidebar does not reload when gones to inner pages

i have this sidebar in in app

when i have selected a link lets say differnt products and then ones more i click one the same link it does not reload

the issue is that when i select a link and inside the link i go to differnt componnet then when i click on the navLink i want to reach the page i started from

hope u understand my question

let me know if u dont 🙂

<ul style={styles.lists}>
          {this.props.siderbarcolor ? (
            <NavLink
              activeClassName="active3"
              className="porpssidebar"
              exact={true}
              to="/client"
            >
              <li style={styles.listItemActive}>
                <div>
                  <FontAwesomeIcon
                    icon={faThLarge}
                    style={{ marginRight: "1rem" }}
                  />
                </div>
                <div> Dashboard</div>
              </li>
            </NavLink>
          ) : (
            <NavLink activeClassName="active3" exact={true} to="/client">
              <li style={styles.listItemActive}>
                <div>
                  <FontAwesomeIcon
                    icon={faThLarge}
                    style={{ marginRight: "1rem" }}
                  />
                </div>
                <div> Dashboard </div>
              </li>
            </NavLink>
          )}
          <NavLink to="/product" activeClassName="active3">
            <li style={styles.listItem}>
              <div>
                <FontAwesomeIcon
                  icon={faUserMd}
                  style={{ marginRight: "1rem" }}
                />
              </div>
              <div>Your product </div>
            </li>
          </NavLink>
          <NavLink activeClassName="active3" to="/cproducts" onClick={reloder()}>
            <li style={styles.listItem}>
              {console.log("dada")}
              <div>
                <FontAwesomeIcon
                  icon={faBriefcaseMedical}
                  style={{ marginRight: "1rem" }}
                />
              </div>
              <div> differnt products</div>
            </li>
          </NavLink>

        
          <NavLink to="/meassger" activeClassName="active3">
            {/* <li style={styles.listItem}></li> */}
            <li style={styles.listItem}>
              <div>
                <FontAwesomeIcon icon={faSms} style={{ marginRight: "1rem" }} />
              </div>
              <div>Messages</div>
            </li>
          </NavLink>
          <NavLink to="/cproduct" activeClassName="active3">
            <li style={styles.listItem}>
              <div>
                <FontAwesomeIcon
                  icon={faQrcode}
                  style={{ marginRight: "1rem" }}
                />
              </div>
              <div>serch product</div>
            </li>
          </NavLink>
        </ul>