Ссылки с параметрами

Последнее обновление: 21.03.2025

Если мы хотим добавить к адресу ссылки параметр, то весь адрес помещается в фигурные скобки. Для примера определим следующую страницу:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
    <div id="app"></div>

    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/babel" data-type="module">
        import React from "https://esm.sh/react@19?dev";
        import ReactDOM from "https://esm.sh/react-dom@19/client?dev";
        import { BrowserRouter, Routes, Route, Outlet, useParams, NavLink } from "https://esm.sh/react-router-dom@7?dev";
  
        const users =[
                    {id: 1, name: "Tom"}, 
                    {id: 2, name: "Bob"}, 
                    {id: 3, name: "Sam"} 
                ];
 
        function UserList(){
            return (
                <>
                    <h2>Список пользователей</h2>
                    <ul>
                    {
                        users.map(function(user){
                            return <li key={user.id}>
                                    <NavLink to={`/users/${user.id}`}>{user.name}</NavLink>
                                </li>
                        })
                    }
                    </ul>
                </>
            );
        }
        function User(){
            // получаем параметры
            const {id} = useParams();
            const user = users.find(l=>l.id == id);
            if(user===undefined) return <h2>Пользователь не найден</h2>;
            else return <h2>Пользователь {user.name}</h2>;
        }
        function Users(){
            return (<div>
                    <h1>Пользователи</h1>
                    <Outlet />
            </div>);
        }
        ReactDOM.createRoot(
            document.getElementById("app")
        )
        .render(
            <BrowserRouter>
                <div>
                <Routes>
                    <Route path="/" element={<h2>Главная</h2>} />
                    <Route path="/users" element={<Users />}>
                        <Route index element={<UserList />} />
                        <Route path=":id" element={<User />} />
                    </Route>
                    <Route path="*" element={<h2>Ресурс не найден</h2>} />
                </Routes>
                </div>
            </BrowserRouter>
        );
    </script>
</body>
</html>

Для эмуляции хранилища данных здесь определен массив users. Для доступа к данным этого массива выводятся ссылки:

<NavLink to={`/users/${item.id}`}>{item.name}</NavLink>

И при переходе по адресу "/users" мы увидим набор ссылок:

Параметры в ссылках в React

При переходе по ссылке компонент User получит значение параметра и по нему извлекет из массива users нужный объект:

Передача параметров в ссылки в React

Аналогичный пример с использованием компонентов-классов:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
    <div id="app"></div>

    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/babel" data-type="module">
        import React from "https://esm.sh/react@19?dev";
        import ReactDOM from "https://esm.sh/react-dom@19/client?dev";
        import { BrowserRouter, Routes, Route, Outlet, useParams, NavLink } from "https://esm.sh/react-router-dom@7?dev";
  
        const users =[
                    {id: 1, name: "Tom"}, 
                    {id: 2, name: "Bob"}, 
                    {id: 3, name: "Sam"} 
                ];
 
        function User(){
            // получаем параметры
            const {id} = useParams();
            const user = users.find(l=>l.id == id);
            if(user===undefined) return <h2>Пользователь не найден</h2>;
            else return <h2>Пользователь {user.name}</h2>;
        }
        class UserList extends React.Component{
            render(){
                return (
                    <>
                    <h2>Список пользователей</h2>
                    <ul>
                    {
                        users.map(function(user){
                            return <li key={user.id}>
                                    <NavLink to={`/users/${user.id}`}>{user.name}</NavLink>
                                </li>
                        })
                    }
                    </ul>
                    </>
                );
            }
        }
        class Users extends React.Component{
            render(){
                return (<div>
                    <h1>Пользователи</h1>
                    <Outlet />
                </div>)
            }
        }
        ReactDOM.createRoot(
            document.getElementById("app")
        )
        .render(
            <BrowserRouter>
                <div>
                <Routes>
                    <Route path="/" element={<h2>Главная</h2>} />
                    <Route path="/users" element={<Users />}>
                        <Route index element={<UserList />} />
                        <Route path=":id" element={<User />} />
                    </Route>
                    <Route path="*" element={<h2>Ресурс не найден</h2>} />
                </Routes>
                </div>
            </BrowserRouter>
        );
    </script>
</body>
</html>

НазадСодержаниеВперед

Помощь сайту
Помощь сайту
Юмани:
410011174743222
Номер карты:
4048415020898850
Телеграмм