Routers in react

Routers in react are used to navigate between pages. If you use "a" tag, request is sent to the server to download the page and when new page loads, the state of react application gets destroyed unless you store the state in persistent location. When you create links using routers, user lands on new page (also url change is reflected in address bar) but all this is happening at client side. No request is sent to server. To use routers, you will need to install below package.

npm i react-router-dom

Here is an example showing the react routers in action.


import React from "react";

//You might import switch(to map links with components), NavLink(for styling links) 

import {
  BrowserRouter,
  Route,
  Link
} from "react-router-dom";


export default function RouterDemo() {
  return (
    <BrowserRouter>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/contact">Contact Me</Link>
          </li>
        </ul>
            <Route exact path="/contact" component={ContactPage}/>
            <Route exact path="/" component={HomePage}/> 
      </div>
    </BrowserRouter>
  );
}

function HomePage() {
  return (
    <div>
      <h1>This is the home page</h1>
    </div>
  );
}

function ContactPage() {
  return (
    <div>
      <h1>Contact me on www.softpost.org</h1>
    </div>
  );
}

Complex problems, Simple Solutions