React Router Basics

Photo by Timothy Cuenat on Unsplash

React Router Basics: Navigating Your React Apps with Ease

Hey there! If you've been dabbling in the world of React and want to make your web apps feel more like, well, apps, then you've likely heard whispers of something called React Router. Honestly, This little gem handles navigation from one view to another without the page refresh, making your applications smooth and user-friendly. Today, I'm going to walk you through the basics of React Router to get you up and running in no time!

What is kinda React Router?

React Router is kinda a standard library in the React ecosystem that enables dynamic routing in your application.

You ever wonder about this? it allows you to handle routes declaratively. What does that mean? Well, instead of your web app reloading the entire page every time a user clicks a link, React Router lets your application handle transitions between different parts of your app smoothly and quickly.

Honestly, It’s like giving your app a set of seamless sliding doors rather than the old-fashioned push-to-open ones!

Setting Up React Router

Getting React Router set up in your project is pretty straightforward.

First, you need to add it to your project. If you're using npm (and chances are you are), you can add React Router by running:

Pretty cool, huh?

Source: based on community trends from Reddit and YouTube

Copyable Code Example

npm install react-router-dom

Once you have it installed, you can start setting up routing in your application. Here’s a simple example to give you a taste:


import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const Home = () => <h2>Home Page</h2>;
const About = () => <h2>About Page</h2>;

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));


In the example above, we set up a basic Router with two routes: Home and About. The Router component wraps your entire application, or at least the part of it that should have routing functionality. The Route component is used to declare what component should be rendered based on the URL path. Notice the use of exact in the Route for the Home path — it's necessary to make sure that route matches exactly, and isn't just a substring of another path.

Understanding Links

In React Router, we use the Link component to create links that are aware of the router's internal state. This means when you click on a link, it doesn't do a full page reload. Instead, it simply updates the browser's history and displays the right component. In the example above, clicking on the links swaps out the displayed component between Home and About without reloading the page.

Why Use React Router?

React Router allows your application to scale gracefully, handling as many views as needed. It keeps the URL in sync with what's on screen, making sure users can bookmark and share links. Plus, by managing routing programmatically, you can introduce animations, prompts, and even data loading logic specific to each route. It's powerful stuff!

I hope this quick dive into React Router helps you see how useful it can be in your projects. As always, the best way to truly understand it is by diving in and starting to play around with it in your own projects. Happy coding!