betacode

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

  1. Что такое React Router?
  2. Создать проект и установить библиотеку
  3. Написать код

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>
Запустите ваше приложение и посмотрите результат на браузере:

Pуководства ReactJS

Show More

Новейшие статьи

Show More