Понимание ReactJS Router с базовым примером (NodeJS)

View more Tutorials:

1- Что такое React Router?

React Router значит стандартная маршрутизация (routing) библиотеки в  React. Он синхронизирует интерфейс приложения с URL на браузере. React Router позволяет вам маршрутизировать  "поток данных" (data flow) ясно в вашем приложении. Он равен утверждению, если у вас есть данный  URL, он будет равен данному  Route (маршрут), и интерфейс будет следующим!
Идея у  Router (маршрутизатор) очень полезен так как вы работаете с React, библиотекой  Javascript для программирования одностраничных приложений ( Single Page Application). Чтобы развить приложение  React вам нужно написать очень много  Component, но понадобится только один файл для обслуживания пользователя это  index.html (Это в основном).
React Router помогает вам определить динамические  URL, и выбрать подходящий  Component, чтобы отобразить на браузере пользователя соответствующий каждому  URL.

<BrowserRouter> vs <HashRouter>

React Router предоставляет вам 2 компонента  <BrowserRouter> & <HashRouter>. Эти два компонента отличаются в виде  URL которые мы создадим и синхронизируем.
// <BrowserRouter>
http://example.com/about

// <HashRouter>
http://example.com/#/about
<BrowserRouter> более распространен в использовании, он использует History API имеющийся в  HTML5 для наблюдения за историей вашего маршрутизатора. При этом  <HashRouter> использует  hash у URL ( window.location.hash) чтобы все запоминать. Если у вас есть намерение поддерживать старые браузеры, вам стоит быть связанным с  <HashRouter>, или вы хотите создать приложение React используя  Router со стороны client, то  <HashRouter> является резонным выбором.

<Route>

Компонент  <Route> определяет маппинг (mapping) между  URL и Component. Это значит, когда пользователь проходит по URL на браузере, соответствующий  Component будет  render (изображен) на интерфейсе.
<BrowserRouter>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/topics" component={Topics}/>
</BrowserRouter>


<HashRouter>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/topics" component={Topics}/>
</HashRouter>
 
Атрибут  exact используется в  <Route> чтобы сказать данный  <Route> работает только если  URL на браузере абсолютно подходит значению его  path атрибута.

<BrowserRouter>
    ...
    <Route path="/about" component={About}/>
    ...
</BrowserRouter>


http://example.com/about                      ==> OK Work!
http://example.com/about#somthing             ==> OK Work!
http://example.com/about/something            ==> OK Work!
http://example.com/about/a/b                  ==> OK Work!

-------------------

http://example.com/something/about            ==> Not Work!
http://example.com/something/about#something  ==> Not Work!
http://example.com/something/about/something  ==> Not Work!

<HashRouter>
    ...
    <Route path="/about" component={About}/>
    ...
</HashRouter>


http://example.com#/about                      ==> OK Work!
http://example.com#/about/somthing             ==> OK Work!

----------------

http://example.com/something             ==> Not Work!
http://example.com/something#/about      ==> Not Work!

<BrowserRouter>
    ...
    <Route exact path="/about" component={About}/>
    ...
</BrowserRouter>



http://example.com/about                      ==> OK Work!
http://example.com/about#somthing             ==> OK Work!

-------------

http://example.com/about/something            ==> Not Work!
http://example.com/about/a/b                  ==> Not Work!

http://example.com/something/about            ==> Not Work!
http://example.com/something/about#something  ==> Not Work!
http://example.com/something/about/something  ==> Not Work!

<HashRouter>
    ...
    <Route exact path="/about" component={About}/>
    ...
</HashRouter>


http://example.com#/about                      ==> OK Work!

----------------

http://example.com#/about/somthing             ==>  Not Work!
http://example.com/something                   ==> Not Work!
http://example.com/something#/about            ==> Not Work!

2- Создать проект и установить библиотеку

Для начала вам нужно установить инструмент  create-react-app, и создать проект  React с названием  react-router-basic-app:
# Install tool:

npm install -g create-react-app

# Create project named 'react-router-basic-app':

create-react-app react-router-basic-app

 
Ваш проект создан:
Далее, CD в созданный проект и выполните команду ниже для установки библиотеки  react-router-dom в ваш проект:
# CD to your project

cd react-router-basic-app

# Install react-router-dom library:

npm install --save react-router-dom
 
Откройте ваш проекта на определенном редакторе, с которым знакомы (Например  Atom). Откройте файл  package.json, вы увидите библиотека  react-router-dom была добавлена в ваш проект.
Запустите ваше приложение:
# Start App

npm start

3- Написать код

Удалите все содержание 2 файлов  App.css & App.js, мы напишем код для этих 2 файлов.
App.css
.main-route-place {
  border: 1px solid  #bb8fce;
  margin:3px;
  padding: 5px;
}

.secondary-route-place {
  border: 1px solid #a2d9ce;
  margin: 5px;
  padding: 5px;
}
App.js
import React from "react";
import { BrowserRouter, Route, Link } from "react-router-dom";

import './App.css';

class App extends React.Component {

  render()  {
    return  (
      <BrowserRouter>
        <div>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/topics">Topics</Link>
            </li>
          </ul>

          <hr />
          <div className="main-route-place">
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/topics" component={Topics} />
          </div>
        </div>
      </BrowserRouter>
    );
  }

}

class Home extends React.Component {

  render()  {
    return (
      <div>
        <h2>Home</h2>
      </div>
    );
  }
}

class About  extends React.Component {
  render() {
    return (
      <div>
        <h2>About</h2>
      </div>
    );
  }
}

class Topics extends React.Component {
  render( ) {
    return (
      <div>
        <h2>Topics</h2>
        <ul>
          <li>
            <Link to={`${this.props.match.url}/rendering`}>
              Rendering with React
            </Link>
          </li>
          <li>
            <Link to={`${this.props.match.url}/components`}>Components</Link>
          </li>
          <li>
            <Link to={`${this.props.match.url}/props-v-state`}>
              Props v. State
            </Link>
          </li>
        </ul>

        <div className="secondary-route-place">
          <Route
            path={`${this.props.match.url}/:topicId`}
            component={Topic} />
          <Route
            exact
            path={this.props.match.url}
            render={() =>
              <h3>
                Please select a topic.
              </h3>
            }
            />
        </div>
      </div>
    );
  }
}

class Topic extends React.Component {
  render()  {
    return (
      <div>
        <h3>
          {this.props.match.params.topicId}
        </h3>
      </div>
    );
  }
}

export default App;
Ничего не нужно менять с 2 файлами  index.js & index.html:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
 
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
   
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    
  </body>
</html>
Запустите ваше приложение и посмотрите результат на браузере:

View more Tutorials: