11. React Router

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

React Router helps us create dynamic navigation in our app!

Sounds useful! How do we get started?

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

• Installing React Router

To install react-router-dom , just run the following 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!

That's it? I thought it'd 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>
  );
}

Oh, I see! You wrap your app in a Router , then use Link for navigation and Route to render the right 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 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! 😃