Load specific scene upon click button

Question

Below is the current code at App.js

//export default App;
export default class App extends Component {
  constructor(props) {
    super(props);

    this.unityContent = new UnityContent(
      "unity_project_build/Build.json",
      "unity_project_build/UnityLoader.js"
    );

    this.SceneChange = this.SceneChange.bind(this);
  }

  // change scene and orientatation buttons
  SceneChange() {
    this.unityContent.send("GameManageer", "ChangeScene");
  }

  render() {
    return (
      <Router>
        <div>
          <h2>Welcome to React Router Tutorial</h2>
          <nav className="navbar navbar-expand-lg navbar-light bg-light">
            <ul className="navbar-nav mr-auto">
              <li>
                <Link to={"/"} className="nav-link">
                  {" "}
                  Home{" "}
                </Link>
              </li>
              <li>
                <Link to={"/Office"} className="nav-link">
                  Office
                </Link>
              </li>
              <li>
                <Link to={"/gym"} className="nav-link">
                  Gym
                </Link>
              </li>
            </ul>
          </nav>
          <hr />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/Office" component={Office} />
            <Route path="/gym" component={Gym} />
          </Switch>
        </div>
      </Router>
    );
  }
}

what I want to happen is when I click gym, I want to load the function SceneChange.

This is what I have tried, I wrote the function Scenechange in App.js and use an onClick function to bind it. But nothing changes

 <li>
   <Link to={"/gym"} onClick={this.SceneChange} className="nav-link">
    Gym
   </Link>
 </li>

Any help is appreciated.

Answer 1

Finally solve it.

render() {
    return (
      // Finally render the Unity component and pass
      // the Unity content
      // through the props. And create
      // a button to handle the click event

      <div>
        <button onClick={this.onClickStart}>Start</button>
        <button onClick={this.onClickStop}>Stop</button>
        <button onClick={this.decrease}>-</button>
        <input
          type="number"
          min="1"
          max="200"
          value={this.state.value}
          onChange={this.onNumberChange}
        />
        <button onClick={this.increase}>+</button>
        <button onClick={this.reset}>Reset</button>
        <button onClick={this.changeView}>2D/3D</button>
        {this.SceneChange()}
        {/* <button onClick={this.SceneChange}>Change</button> */}
        <Unity unityContent={this.unityContent} />
      </div>
    );
  }
}

export default Gym;

in my Gym.js I call the function directly. {this.SceneChange()} and it worked. So I am just posting the solution here so that whoever uses react unity webGL will have this solution