Javascript function is working on main page but stops on second pages

I am trying to make a website with ReactJS. In my website I have a slice button on main page;

When you click the slice button, each side shows a different image.

I add links to the Menu bar as well for the slice button (I am going to call Left - Right) so when you click the link, the first go to the part of the main page then it moves the slice button and shows the image.

I do not have any problem with the links when I am on the main page but problem is; I am using same Menu bar for all pages and when I click the Left and the Right right links in the Menu on a different page it stops.

The links open the main page but stay the beginning of the main page.

Here is my ChangeViewButtonClick function in main;

import React, { Component } from "react";


class Main extends React.Component{

constructor(props) {
    super(props);
    this.state = {
      view: "Left"
   };
 this.ChangeViewButtonClick = this.ChangeViewButtonClick.bind(this);
 }

    ChangeViewButtonClick(view) {
    if (view === "Left") {
      this.setState({ view: "Left" });
      this.refs.toggle.state.checked = true
    } else if (view === "Right") {
      this.setState({ view: "Right" });
      this.refs.toggle.state.checked = false
    }
  }

render(){
return(
    <div>
        <h1>Main Page is Here </h1>
    </div>
  );
 }
}

and this is my Menu Page ;

import React from 'react';
import { Collapse, Navbar, NavbarToggler, NavbarBrand, NavLink} from 'reactstrap';
import { HashLink as Link } from 'react-router-hash-link';


class Menu extends React.Component {  
  constructor(props) {
        super(props);

        this.toggle = this.toggle.bind(this);
        this.state = {
          isOpen: false
      };
    }
        toggle() {
        this.setState({
          isOpen: !this.state.isOpen
        });

  render() {
  return(
<Navbar light expand="md">
  <NavbarToggler onClick={this.toggle} ></NavbarToggler>
  <Collapse isOpen={this.state.isOpen} navbar>

  <nav className="nav">
     <ul className="nav__menu">
         <li className="nav__menu-item">
              <NavLink to="#" tag= {Link} >Images
              </NavLink>
              <Image_SubMenu ChangeViewButtonClick{this.props.ChangeViewButtonClick}/>
            </li>
            <li
              className="nav__menu-item">
              <NavLink tag= {Link} to="/main#something">Something
              </NavLink>
             </li>
           </ul>
        </nav>
      </Collapse>
    </Navbar>

  );
 }
}
  class Image_SubMenu extends React.Component {
    constructor(props) {
      super(props);
    }

  render() {

      return (

      <ul className="nav__submenu">
      <li className="nav__submenu-item ">
      <NavLink to="/main#map" tag= {Link} 

                onClick={evt => this.props.ChangeViewButtonClick("Left")} >Left Image</NavLink> 
            </li>

          <li className="nav__submenu-item ">
             <NavLink to="/main#map" tag= {Link}

                onClick={evt => this.props.ChangeViewButtonClick("Right")} >Right Image</NavLink>
          </li>
    </ul>

      )
    }
  }

export default Menu;

How can I fix the link that if I click link anywhere in the website then shows me Left or Right images

I found a few article about delegated events unfortunately I could not figure out.

Thanks in advance

Note that this is only part of the code and just paste the part that you need so if I something miss please tell me so can be a few typo.

from Javascript function is working on main page but stops on second pages