11.1. Introduction to React Router

• 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.

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

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

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

• Installing React Router

To install react-router-dom , simply run this command:

npm install react-router-dom

• Basic Routing

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

Really? I thought it would be more complicated!

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 (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

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

Ah, I get it! You wrap your app in a Router , use Link for navigation, and Route to render the correct components!

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! 😃