betacode

Понимание ReactJS Router с примером на стороне клиента

  1. Что такое React Router?
  2. React Router со стороны Client

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

React Router это стандартная библиотека маршрутизации (routing) в React. Он хранит интерфейс приложения синхронизированным с URL на браузере. React Router позволяет вам маршрутизировать "поток данных" (data flow) в вашем приложении понятным способом. Он подобен утверждению, если у вас есть данный URL, он будет подобен этому Route (маршруту), и интерфейс будет таким!
React Router в самом деле имеет пользу и широко используется в приложениях React больше со стороны Server чем приложения React со стороны Client. Точнее React Router обычно используется в приложеии React в среде NodeJS Server, он разрешает вам определять динамичные URL но соответствуюшие философии "Single Page Application" (Одностраничное приложение) у React. Для разработки приложения React вам нужно написать много Component, но нужен только один файл для обслуживания пользователей это index.html (Это основа).
React Router помогает вм определить динамичные URL, и выбрать подходящий Component для render (изображения) на браузере пользователя соответственно каждому 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) чтобы запомнить все вещи. Если вы хотите поддерживать старые браузеры или приложение React используя Router со стороны клиента, то <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!

Если вы ищете пример React Router со стороны Server (NodeJS), статьи ниже могут быть полезными для вас:

2. React Router со стороны Client

OK, В данной статье я покажу вам как создать приложение React используя React Router со стороны Client. Ниже является просмотр изображение приложения.
Библиотеки нужные для вашего приложения:
<!-- React & ReactDOM Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>

<!-- React Router -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/4.3.1/react-router-dom.min.js"></script>

<!-- Babel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

<!-- CSS -->
<link rel = "stylesheet" type = "text/css" href = "router-example.css" />
Если вы хотите найти более новую версию библиотеки, пройдите по ссылке ниже:
hashrouter-example.css
.product {
   padding: 5px;
   margin-bottom: 15px;
   background-color: #ddd;
}

 .product-nav a {
   background-color: #ddd;
   margin: 5px;
   padding: 5px;
   text-decoration: none
 }

 .selected {
    color: red;
 }

 .route-place {
     margin-top: 10px;
     padding: 30px;
     height: 100%;
     border: 1px solid #ddd;
}
hashrouter-example.html
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>ReactJS Router</title>

      <!-- React & ReactDOM Libraries -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>

      <!-- React Router -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/4.3.1/react-router-dom.min.js"></script>

     <!-- Babel -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

      <!-- CSS -->
      <link rel = "stylesheet" type = "text/css" href = "hashrouter-example.css" />

   </head>
   <body>
      <h3>Client Side ReactJS Router</h3>

      <div id="app"></div>

      <script src="hashrouter-example.jsx" type="text/babel"></script>
   </body>
</html>
hashrouter-example.jsx
// import {BrowserRouter,NavLink} from 'react-router-dom';
// const { HashRouter, NavLink, Route } = ReactRouterDOM;

// Component
class ProductShortInfo extends React.Component {
  render() {
    return (
      <div className="product">
        <h3>Samsung Galaxy S9</h3>
        <p>Price: $900</p>
      </div>
    );
  }
}

// Component
class ProductFeature extends React.Component {
  render() {
    return <h3>Some Features of Samsung Galaxy S9!</h3>;
  }
}

// Component
class ProductImages extends React.Component {
  render() {
    return <h3>Some Images of Samsung Galaxy S9</h3>;
  }
}

// Component
class ProductComments extends React.Component {
  render() {
    return <h3>Some Customer Comments</h3>;
  }
}

//
class Product extends React.Component {
  render() {
    return (
      <ReactRouterDOM.HashRouter>
        <div>
          <ProductShortInfo />

          <div className="product-nav">
            <ReactRouterDOM.NavLink exact to="/" activeClassName="selected">
              Feature
            </ReactRouterDOM.NavLink>

            <ReactRouterDOM.NavLink exact to="/images" activeClassName="selected">
              Images
            </ReactRouterDOM.NavLink>

            <ReactRouterDOM.NavLink to="/comments" activeClassName="selected">
              Comments
            </ReactRouterDOM.NavLink>
          </div>
          <div className="route-place">
            <ReactRouterDOM.Route exact path="/" component={ProductFeature} />
            <ReactRouterDOM.Route exact path="/images" component={ProductImages} />
            <ReactRouterDOM.Route path="/comments" component={ProductComments} />
          </div>
        </div>
      </ReactRouterDOM.HashRouter>
    );
  }
}
//
class App extends React.Component {
  render() {
    return <Product />;
  }
}

// Render
ReactDOM.render(<App />, document.querySelector("#app"));
Примечание: Два компонента: <ReactRouterDOM.NavLink> & <ReactRouterDOM.Link> очень похожи в использовании, <ReactRouterDOM.NavLink> лучше так как он поддерживает атрибут activeClassName (Полезен в данном примере).

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

Show More

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

Show More