Undertanding ReactJS Router with example on the client side

View more Tutorials:

ReactJS Tutorials

What is React Router?
React Router on Client side

1- What is React Router?

React Router is a standard routing library in React. It keeps application interface in sync with the URL on browser. The React Router allows you route "data flow" in your application clearly. It is equivalent to assertion. If you have this URL, it will be equivalent to this Route, and the interface will be like this!

React Router is actually useful and used widely in React applications at the Server side rather than those at the Client side. Specifically, the React Router is often used in React applications in the NodeJS Server environment, which allows you to define dynamic URLs in accordance with the React's "Single Page Application" philosophy. Developing a React application, you need to write a lot of Components but need only one file to serve users. It is index.html.

React Router helps you define dynamic URLs, and selects a suitable Component to render on the user browser corresponding to each URL.

<BrowserRouter> vs <HashRouter>

React Router provides you with the two components such as <BrowserRouter> & <HashRouter>. These two components are different in 2 URL types which they will create and synchronize.


// <BrowserRouter>
http://example.com/about
 
// <HashRouter>
http://example.com/#/about

<BrowserRouter> is used more popular. It uses History API included in HTML5 to monitor the history of your router while the <HashRouter> uses the hash of URL (window.location.hash) to memorize all things. If you intends to support old browsers or the React application using client-side Router, then the <HashRouter> is a reasonable choice.

<Route>

The <Route> component defines a mapping between a URL and a Component. That means when an user accesses by a URL on the browser, a corresponding Component will be rendered on the 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>

The exact attribute is used in <Route> to say that this <Route> operates only if the URL on the browser is absolutely suitable for the value of its path attribute.

<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!

If you are looking an example of React Router on the Server side (NodeJS), the following posts can be useful to you:

Undertanding ReactJS Router with a basic example (NodeJS)

2- React Router on Client side

OK, in this lesson, I am going to show you to create a React application using a Client -side React Router. Below is the preview image of the application.

Libraries that are necessary for your 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" />

If you want to find a new library version, please visit the following link:

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"));

Note: The components: <ReactRouterDOM.NavLink> & <ReactRouterDOM.Link> are very similar in usage. The <ReactRouterDOM.NavLink> is better because it supports the activeClassName attribute (useful in this example).

View more Tutorials:

ReactJS Tutorials