• Introduction Today, we’ll learn about React Router! React Router is a powerful library that handles navigation in React apps. Join Geek and Gal as they have fun exploring the basics of React Router in a way that’s easy to understand for beginners and advanced users alike.
Gal Normal

React Router is super useful for creating dynamic navigation in our React apps!

Geek Curious

Sounds cool! How do we get started with React Router?

Gal Happy

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

  • Installing React Router
Gal Pleased

To install react-router-dom , simply run this 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

Really? I thought it would 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

Ah, I get it! You wrap your app in a Router , use Link for navigation, and Route to render the correct 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 breeze! With the react-router-dom package, you can easily use the BrowserRouter, Route, and Link components to create dynamic and flexible routing. Now you’re ready to build amazing navigation in your React apps! 😃