• Introduction Get ready to explore React Router! React Router is a powerful library for handling navigation in your React apps. Let’s dive in with Geek and Gal as they make routing a breeze with some hilarious interactions.
Gal Normal

React Router helps us create dynamic navigation in our app!

Geek Curious

Sounds useful! How do we get started?

Gal Happy

First, you need to install the react-router-dom package. Then, you can start adding routes to your app!

  • Installing React Router
Gal Pleased

To install react-router-dom , just run the following command:

npm install react-router-dom
  • Basic Routing
Gal Happy

Once you've installed it, you can use the BrowserRouter , Route , and Link components to create routes!

Geek Surprised

That's it? I thought it'd be more complicated!

Gal Happy

Nope! React Router makes it super easy! Let's take a look at a basic example:

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
            <Link to="/">Home</Link>
            <Link to="/about">About</Link>

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
Geek Happy

Oh, I see! You wrap your app in a Router , then use Link for navigation and Route to render the right components!

Gal Happy

Exactly! And you can create as many routes as you need for your app!

  • Conclusion React Router makes handling navigation in your React apps a piece of cake! With the react-router-dom package, you can use the BrowserRouter, Route, and Link components to create dynamic and flexible routing. Now, you’re ready to build amazing navigations in your React apps! 😃