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

View more Tutorials:

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 (Полезен в данном примере).

View more Tutorials: