Comprendre ReactJS Router avec exemple côté client

Qu'est-ce que React Router ?
React Router côté Client

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.

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 :
Comprendre le ReactJS-Router avec un exemple basique (NodeJS)

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 :
https://cdnjs.com/

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).

Comprendre ReactJS Router avec exemple côté client

1. Qu'est-ce que React Router ?

2. React Router côté Client

Tutoriels de programmation ReactJS

Tutoriels de programmation ReactJS

Articles les plus récents