How to navigate to another page on button click in React?

Question

JavaScript

Hello! Help me please!
The thing is that I'm trying to go to a completely new page of my project in React by clicking on a button. Then, on that other page, there's a 'Back' button that takes you back. Below is one of my attempts to implement the first step (In the address bar, when you click on the button, the link is displayed, but the page does not appear). If you have any ideas what I'm doing wrong, please share)

import React from "react";
import ReactDOM from "react-dom";
import Statistics from "../Statistics_components/Statistics.js";

 class Statistics_button extends React.Component {
    onclick () {
      window.location.assign('../Statistics_components/Statistics.js');
    }

    render() {
      return (<button onClick={(e) => this.onclick(e)}><i className="fas fa-chart-bar"></i></button>);
    }
  }
export default Statistics_button;

Answer 1

Friends, finally the clarification has come. Below is an example implementation:
Import your pages into the main App component, in this case it is FirstPageComponent and SecondPageComponent

import React, { Component } from "react";
import FirstPageComponent from "./FirstPageComponent.js";
import SecondPageComponent from"./SecondPageComponent";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

Next, bind these pages in the App using react-router as follows

function App (){
  return(
    <Router>
      <div className="App">
        <Route path="/" exact exact component={FirstPageComponent}
        }/>
        <Route path="/second" exact component={SecondPageComponent}/>
     </div>
     </Router>
  )
}
export default App;

Further, it is desirable to bind to the corresponding buttons on your pages in separate files as follows

import React from "react";
import ReactDOM from "react-dom";

 class OnSecondPageButton extends React.Component {
    onclick () {
      window.location.assign('http://localhost:3000/second/');
    }

    render() {
      return (<a onClick={(e) => this.onclick(e)}><i className="fas fa-chart-bar"></i></a>);
    }
  }
export default Statistics_button;

import React from "react";
import ReactDOM from "react-dom";

 class Back_button extends React.Component {
    onclick () {
      window.location.assign('http://localhost:3000/');
    }

    render() {
      return (<button  onClick={(e) => this.onclick(e)}>Back </button>);
    }
  }
export default Back_button;

Then do not forget to import your buttons and call them in the right places on your pages.
Something like this. Thanks for support. I wish you success)

Answer 2

you can't change to js file.
how to do it right - see https://reacttraining.com/react-router/