React Router Basics

1. Setting Up React Router

To get started with React Router, you need to install it into your project:

Edit Copy

npm install react-router-dom

Once installed, you can start using React Router components like BrowserRouter, Route, and Switch in your application.

2. Basic Routing Example

Here's a basic example of setting up routes in your React app using React Router:

Edit Copy

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

function Home() {
    return <h2>Home Page</h2>;
}

function About() {
    return <h2>About Page</h2>;
}

function App() {
    return (
        <Router>
            <Switch>
                <Route path="/home" component={Home} />
                <Route path="/about" component={About} />
            </Switch>
        </Router>
    );
}

export default App;

In this example, we use BrowserRouter to handle routing, Route to define different routes, and Switch to render the first matching route.

3. Navigation with Link

To navigate between routes, you can use the Link component from React Router instead of regular anchor tags. The Link component prevents the page from reloading and allows for client-side navigation:

Edit Copy

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

function Home() {
    return <h2>Home Page</h2>;
}

function About() {
    return <h2>About Page</h2>;
}

function App() {
    return (
        <Router>
            <nav>
                <Link to="/home">Home</Link> | 
                <Link to="/about">About</Link>
            </nav>
            <Switch>
                <Route path="/home" component={Home} />
                <Route path="/about" component={About} />
            </Switch>
        </Router>
    );
}

export default App;

The Link component renders a clickable link that lets users navigate between routes. It is used to replace traditional anchor tags and avoid page reloads.

4. Route Parameters

Sometimes you may want to pass parameters to a route. React Router makes it easy to define dynamic routes with parameters:

Edit Copy

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

function UserProfile({ match }) {
    return <h2>User ID: {match.params.id}</h2>;
}

function App() {
    return (
        <Router>
            <nav>
                <Link to="/user/123">User 123</Link>
            </nav>
            <Route path="/user/:id" component={UserProfile} />
        </Router>
    );
}

export default App;

In this example, the route path includes a dynamic segment /:id, which React Router maps to the UserProfile component. The component can access the dynamic part of the URL (the user ID) through match.params.id.

5. Redirecting Users

Sometimes you may want to programmatically redirect users from one route to another. This can be done using the Redirect component:

Edit Copy

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

function App() {
    return (
        <Router>
            <Route path="/home" component={Home} />
            <Redirect from="/" to="/home" />
        </Router>
    );
}

function Home() {
    return <h2>Home Page</h2>;
}

export default App;

The Redirect component allows you to automatically redirect the user to a different route. In this example, when the user visits the root URL ("/"), they will be redirected to the "/home" route.

6. Summary

React Router is a powerful tool for managing navigation in React applications. It allows you to define routes and navigate between them efficiently using components like BrowserRouter, Route, and Link. You can also handle dynamic routes, route parameters, and redirects, making React Router an essential tool for building single-page applications (SPAs) in React.