Introduction To React Router | Routing

Overview of React Router for navigation

React Router is a powerful library that allows you to add dynamic routing to your React applications. It provides a declarative way to manage navigation and routing within your app. This tutorial covers the basics of React Router and how to use it for navigation.

Key Points:

React Router is a library for adding routing to React applications.
It provides components like BrowserRouter, Route, Link, and Switch.
React Router allows you to create single-page applications with multiple views.

Installing React Router

First, install React Router using npm or yarn:

npm install react-router-dom
# or
yarn add react-router-dom

Setting Up BrowserRouter

The BrowserRouter component is the foundation of React Router. It wraps your entire application and provides the routing context.

// Setting up BrowserRouter
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById('root')
);

Defining Routes

Use the Route component to define individual routes in your application. Each route specifies a path and the component to render.

// Defining routes
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';

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

export default App;

Navigating with Link

The Link component is used to create navigational links. It prevents the default browser behavior and allows React Router to handle the navigation.

// Navigating with Link
import React from 'react';
import { Link } from 'react-router-dom';

function Navbar() {
    return (
        <nav>
            <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/about">About</Link></li>
            </ul>
        </nav>
    );
}

export default Navbar;

Switching Between Routes

The Switch component renders the first child Route that matches the location. This is useful for ensuring that only one route is rendered at a time.

// Using Switch to render routes
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';

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

export default App;

Using useHistory for Navigation

The useHistory hook gives you access to the history instance that you may use to navigate.

// Using useHistory for navigation
import React from 'react';
import { useHistory } from 'react-router-dom';

function Home() {
    const history = useHistory();

    const goToAbout = () => {
        history.push('/about');
    };

    return (
        <div>
            <h1>Home</h1>
            <button onClick={goToAbout}>Go to About</button>
        </div>
    );
}

export default Home;

Nested Routes

You can create nested routes by rendering Route components inside other components.

// Creating nested routes
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Profile from './Profile';
import Settings from './Settings';

function App() {
    return (
        <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/profile" component={Profile} />
            <Route path="/settings" component={Settings} />
        </Switch>
    );
}

export default App;

Summary

In this tutorial, you learned about React Router for navigation in React applications. React Router provides a declarative way to manage navigation and routing within your app. You learned how to install React Router, set up BrowserRouter, define routes with Route, navigate with Link, use Switch to render routes, navigate programmatically with useHistory, and create nested routes. Understanding React Router is essential for building single-page applications with multiple views in React.

React - Introduction to React Router