Dynamic routing in React-JS Tutorial-php.cn

Dynamic routing in React

WBOY

Release： 2024-08-28 06:01:39

Original

1042 people have browsed it

Dynamic routing in React

Dynamic routing in React allows you to create routes based on dynamic data or parameters, enabling more flexible and powerful navigation within your application. This is particularly useful for applications that need to render different components based on user input or other dynamic factors.

Setting Up Dynamic Routing with React Router
You’ll typically use the react-router-dom library to implement dynamic routing in React. Here’s a step-by-step guide:

Install React Router: First, you need to install react-router-dom if you haven’t already:
npm install react-router-dom

Create Routes: Define your routes using the component. Use dynamic segments in the path to capture parameters.
JavaScript

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

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

export default App;

Copy after login

Access Route Parameters: Use the useParams hook to access dynamic parameters within your components.
JavaScript

import React from 'react';
import { useParams } from 'react-router-dom';

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

    return (
        <div>
            <h1>User Profile</h1>
            <p>User ID: {id}</p>
        </div>
    );
};

export default UserProfile;

Copy after login

Example: Dynamic User Profiles
Let’s create a simple example where we navigate to different user profiles based on the user ID in the URL.

Home Component: This component will have links to different user profiles.
JavaScript

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

const Home = () => {
    return (
        <div>
            <h1>Home</h1>
            <ul>
                <li><Link to="/user/1">User 1</Link></li>
                <li><Link to="/user/2">User 2</Link></li>
                <li><Link to="/user/3">User 3</Link></li>
            </ul>
        </div>
    );
};

export default Home;

Copy after login

UserProfile Component: This component will display the user ID from the URL.
JavaScript

import React from 'react';
import { useParams } from 'react-router-dom';

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

    return (
        <div>
            <h1>User Profile</h1>
            <p>User ID: {id}</p>
        </div>
    );
};

export default UserProfile;

Copy after login

App Component: This component sets up the router and defines the routes.
JavaScript

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

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

export default App;

Copy after login

The above is the detailed content of Dynamic routing in React. For more information, please follow other related articles on the PHP Chinese website!