0gres

Друзья, наконец то прояснение наступило. Ниже пример реализации:

Импортируйте в основной компонент 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;

Потом не забываем импортировать свои кнопочки и вызвать в нужных местах Ваших страничек.

Как то так. Спасибо за поддержку. Успехов Вам)

Примеры попроще, посложнее

Смысл один и тот-же
1. получаем список файлов (FileList)
2. читаем их при помощи FileReader
3. показываем превью