Друзья, наконец то прояснение наступило. Ниже пример реализации:
Импортируйте в основной компонент App свои страницы, у этом случае это FirstPageComponent и 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";
Дальше делайте привязку этих страниц в App с помощью react-router следующим образом
function App (){
return(
<Router>
<div className="App">
<Route path="/" exact exact component={FirstPageComponent}
}/>
<Route path="/second" exact component={SecondPageComponent}/>
</div>
</Router>
)
}
export default App;
Дальше, желательно в отдельных файлах сделать привязку к соответствующим кнопкам на ваших страницах следующим образом
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;
Потом не забываем импортировать свои кнопочки и вызвать в нужных местах Ваших страничек.
Как то так. Спасибо за поддержку. Успехов Вам)
Простой