Как по нажатию на кнопку перейти на другую страницу в React?

Question

[lamborjiny]

Здравствуйте! Помогите пожалуйста!
Дело в том, что я пытаюсь по нажатию на кнопку перейти на совершенно новую страницу моего проекта в React. Потом, на той другой странице есть кнопка 'Назад' которая перекидывает обратно. Ниже одна из моих попыток реализовать первый шаг (В адресной строке, при клике на кнопу, отражается ссылка, но страница не появляется). Если есть идеи что я не так делаю, пожалуйста поделитесь)

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

[lamborjiny]

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

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

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

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

Comments

[Антон M]

Лучше, чтобы не привязываться к локалхосту, сделать так:
В компонент, где находится кнопка экспортировать Link из реакт-роутера.
import { Link } from "react-router-dom";
Потом добавить ссылку:
<Link to="/second/">Link to second page</Link>

Answer 2

[Robur]

вы не можете перейти на js- файл.
как это делать правильно - посмотрите https://reacttraining.com/react-router/