Intro to: React Router

What is React Router?

React is an efficient solution for building one page web applications by providing developers the ability to build each component of an application to render without refreshing the entire page. React router is the standard routing library for navigation through the multiple views of an react application. With React Router views are rendered inline each view or page to create the illusion of a multiple page application by managing the relationship between the user interface and urls. For this tutorial it is expected that you have some understanding of building a React web application.

Getting Started - Installation

1. Getting started with React Router is as simple as installing it's npm dependency into the existing react project. If you don't have a project setup visit Create-React App before moving on.

npm install react-router-dom

Setting up Views

1. In this example the application contains the following views.

// Home.js
const Home = () => {
  return 
    <div>
      <h2>Home</h2>;
      <p>Welcome to Our React Web App!</p>
    </div>
}

export default Home;

// About.js
const About = () => {
  return 
    <div>
      <h2>About</h2>;
      <p>We are pretty awesome!</p>
    </div>
}

export default About;


// Product.js
const Products = () => {
  return 
    <div>
      <h2>Products</h2>;
      <p>Buy our stuff please!</p>
   </div>
}

export default Products;


// Contact.js
const Contact = () => {
  return 
    <div>
     <h2>Contact</h2>;
     <p>For Inquiries</p>
   </div>
}

export default Contact;

The Router and Links

1. Let's establish routes between the home, products, about, and contact views in our navigation bar in the application. Link creates an <a> tag with a href attribute that specifies the url as values contained in the string.

// App.js
import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

const App = () => {
  return (
    <Router>
      <div>
        <nav classname="nav">
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/products">Products</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>
      </div>
    </Router>
  );
}

export default App;

Switching Views with Links

1. Iterate through the routes to find the one to render using a switch statement with the React Router Switch keyword. The first one that matches the user's click value is the one that will be selected.

// App.js
import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

const App = () => {
  return (
    <Router>
      <div>
         <nav classname="nav">
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/products">Products</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/products">
            <Products />
          </Route>
          <Route path="/contact">
            <Contact />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

Conclusion

That is! I enjoyed covering this topic and was surprised by the simplicity and can’t wait to refactor my current project to include routing. I plan to implement React Router in my future projects to optimize navigating views and I hope found this helpful enough to get you started as well. I recommend establishing routes early on in your project so you don't have deal with more complexity than necessary. Happy coding!

Credits:
React Router https://reactrouter.com/

Creating an React App https://github.com/facebook/create-react-app

Learn By Doing https://daveceddia.com/react-practice-projects/