React Router 4 настроен для базовой маршрутизации.*

Структура файла: Index.jsx — это файл, который свяжет компонент приложения с HTML-страницей. В App.jsx я буду определять маршруты, а HomePage.jsx — еще один компонент, в котором я могу использовать маршруты, определенные в App.jsx, с помощью ссылок.

src
|_Components
  |_HomePage.jsx
  |_AddComposer.jsx
  |_App.jsx
 Index.js

Вот как выглядит Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Route, Link,BrowserRouter as Router} from 'react-router-dom'
import App from './Components/App.jsx';
ReactDOM.render(<App />, document.getElementById('app');
//^ rendering App Component in index.html(not shown in file structure)

В App.jsx я буду определять маршруты и устанавливать данные в состоянии.

import React from 'react';
import HomePage from './Components/HomePage.jsx';
class App extends React.Component {
  constructor(props) {
     super(props) {
       this.state= {
         data: [{name: 'Chopin', age: 39}, {name: 'Bach', age: 65}]
       }
  }
}
render() {
  return (
      <Router>
        <div>
         <Route exact path="/"render={(props) =>           
                (HomePage data={this.state.data}/>)}
        <Route path="/addComposer" render={(props) =>     (<AddComposer/>)} />
        <div>
      </Router>
    </div>
  )
}
}
export default App;

Сейчас определены два маршрута. Если конечной точкой является «/» (т.е. по умолчанию localhost:3000/), HomePage.jsx будет отображаться с передачей набора данных в this.state.

Путь также был определен для «/addComposer». Если мы введем localhost:3000/addComposer** в нашем браузере, будет отображен компонент AddComposer.

Теперь, когда маршруты определены в компоненте приложения, давайте их использовать! Введите Ссылки.

import React from 'react';
import {Link} from 'react-router-dom';
class AddComposer extends Component {
  constructor(props) {
    super(props)
  }
render () {
    return (
      <div>
        <div>
          Name <input type="text" /> 
          Image Url <input type="text" /> 
          <Link to="/"><button type="submit">Submit</button></Link>
        </div>
      </div>
    )
  }
}
export default AddComposer;

^ Достаточно просто, верно? Вы можете инкапсулировать любой элемент, на который хотите добавить ссылку, с помощью ‹Link to= «желаемый маршрут, как определено в App.jsx»›‹/Link›.

В этом случае, когда пользователь нажимает кнопку «Отправить», он будет перенаправлен на HomePage.jsx.

Надеюсь это поможет..!

См.: https://reacttraining.com/react-router/

* Предполагая, что у вас уже настроено приложение для реагирования (например, веб-пакет, зависимости, файловая система). Я показываю только файловую структуру исходного кода в приложении React. Вы можете увидеть образец приложения и файловую структуру здесь.

**localhost:3000 — это пример IP-адреса для локального сервера Node. Пример можно посмотреть здесь.