Dynamic Routing | Routing | React Tutorial

Creating dynamic routes in React

Dynamic routing in React allows you to create routes that can handle different parameters. This is useful for creating routes that can render different content based on the URL parameters. This tutorial covers how to create dynamic routes using React Router.

Key Points:

Dynamic routing allows you to create routes with parameters.
React Router provides the useParams hook to access route parameters.
Dynamic routes are useful for rendering different content based on URL parameters.

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 Dynamic Routes

Use the Route component to define dynamic routes with parameters. The path for a dynamic route includes a parameter prefixed with a colon.

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

function App() {
    return (
        <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/user/:id" component={UserProfile} />
        </Switch>
    );
}

export default App;

Accessing Route Parameters with useParams

The useParams hook from React Router allows you to access the parameters of a route. This is useful for fetching data or rendering content based on the parameter value.

// Accessing route parameters with useParams
import React from 'react';
import { useParams } from 'react-router-dom';

function UserProfile() {
    const { id } = useParams();

    return <h1>User Profile for User ID: {id}</h1>;
}

export default UserProfile;

Generating Links with Parameters

Use the Link component to create navigational links with parameters. This allows you to navigate to dynamic routes with different parameter values.

// Generating links with parameters
import React from 'react';
import { Link } from 'react-router-dom';

function UserList() {
    const users = [
        { id: 1, name: 'John Doe' },
        { id: 2, name: 'Jane Smith' }
    ];

    return (
        <ul>
            {users.map(user => (
                <li key={user.id}>
                    <Link to={`/user/${user.id}`}>{user.name}</Link>
                </li>
            ))}
        </ul>
    );
}

export default UserList;

Full Example

Here is a complete example of dynamic routing in React:

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Navbar from './Navbar';
import Home from './Home';
import UserList from './UserList';
import UserProfile from './UserProfile';

function App() {
    return (
        <Router>
            <Navbar />
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/users" component={UserList} />
                <Route path="/user/:id" component={UserProfile} />
            </Switch>
        </Router>
    );
}

export default App;

// Navbar.js
import React from 'react';
import { Link } from 'react-router-dom';

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

export default Navbar;

// Home.js
import React from 'react';

function Home() {
    return <h1>Home</h1>;
}

export default Home;

// UserList.js
import React from 'react';
import { Link } from 'react-router-dom';

function UserList() {
    const users = [
        { id: 1, name: 'John Doe' },
        { id: 2, name: 'Jane Smith' }
    ];

    return (
        <ul>
            {users.map(user => (
                <li key={user.id}>
                    <Link to={`/user/${user.id}`}>{user.name}</Link>
                </li>
            ))}
        </ul>
    );
}

export default UserList;

// UserProfile.js
import React from 'react';
import { useParams } from 'react-router-dom';

function UserProfile() {
    const { id } = useParams();

    return <h1>User Profile for User ID: {id}</h1>;
}

export default UserProfile;

Summary

In this tutorial, you learned how to create dynamic routes in React using React Router. Dynamic routing allows you to create routes with parameters and render different content based on those parameters. You learned how to install React Router, set up BrowserRouter, define dynamic routes with Route, access route parameters with useParams, and generate links with parameters. Understanding dynamic routing is essential for building flexible and dynamic React applications.

React - Dynamic Routing