Comprendre ReactJS Router avec exemple côté client

View more Tutorials:

1- Qu'est-ce que React Router ?

React Router signifie une bibliothèque de routage (routing) standard dans  React. Elle maintient l'interface de l'application synchrone avec l'  URL du navigateur. Le  React Router vous permet de router clairement le "flux de données" (data flow) dans votre application. Cela équivaut à une affirmation. Si vous avez cette  URL, elle sera équivalente à cette  Route et l'interface sera comme ci-dessous.
React Router est réellement utile et largement utilisée dans les applications React côté Server plutôt que celles côté Client. Plus précisément, le React Router est souvent utilisée dans les applications React de l'environnement du NodeJS Server, ce qui vous permet de définir des URL dynamiques conformément à la philosophie "Single Page Application" (Application à page unique) de React. Pour développer une application React, vous devez écrire de nombreux Component, mais un seul fichier est nécessaire pour servir les utilisateurs. C'est index.html.
React Router vous permet de définir des  URL dynamiques et de sélectionner un  Component approprié pour  render sur le navigateur de l'utilisateur qui correspond à chaque  URL.

<BrowserRouter> vs <HashRouter>

React Router vous fournit deux composants qui sont  <BrowserRouter> & <HashRouter>. Ces deux composants sont différents du type de  URL qu'ils créeront et synchronisent.
// <BrowserRouter>
http://example.com/about
 
// <HashRouter>
http://example.com/#/about
 
<BrowserRouter> est plus largement utilisé, il utilise  History API comprenant dans  HTML5 afin de surveiller l'histoire de votre routage alors que le  <HashRouter> utilise  hash de  URL ( window.location.hash) pour mémoriser tous. Si vous avez l'intention de soutenir des anciens navigateurs ou de l'application  React en utilisant  Router côté Client, alors le  <HashRouter> est le meilleur choix.

<Route>

Le composant  <Route> définit un mapping entre un  URL et un  Component. Cela signifie que lorsqu'un utilisateur accède par un  URL sur le navigateur, un  Component correspondant sera  render sur l'interface.
<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>
 
L'attribut  exact est utilisé dans  <Route> pour dire que ce  <Route> ne fonctionne que si le  URL sur le navigateur est absolument convient à la valeur de ses attributs  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!

Si vous êtes en train de chercher un exemple de  React Router côté  Server ( NodeJS) les publications dans le lien ci-dessous pourraient utiles pour vous :

2- React Router côté Client

OK, dans cette leçon, je vous donnerai des instruction comment créer une application  React qui utilise  React Router du côté  Client. Ci-dessous, l'apercu de l'application.
Les bibliothèques sont nécessaires pour vos applications :
<!-- 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" />
Si vous voulez chercher une nouvelle version de la bibliothèque, veuillez accéder à l'adress ci-dessous :
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"));
Remarque : Ces deux composants : <ReactRouterDOM.NavLink> & <ReactRouterDOM.Link> dont l'usage est similaire, le  <ReactRouterDOM.NavLink> est meilleur car il soutient l'attribut  activeClassName (utile dans cet exemple).

View more Tutorials: