Привет всем, сегодня я буду обсуждать динамические маршруты в React JS. Я буду использовать библиотеку react-router-dom, поскольку она проста в использовании и гибка и может использоваться как для клиентской, так и для серверной маршрутизации.

Давайте начнем…

Настройка части маршрутизации -

index.js

import { BrowserRouter as Router } from 'react-router-dom'
.
.
 <Router>
      <App />
 </Router>
.
.
  • В файле index.js импортируйте компонент маршрутизатора и оберните компонент приложения внутри компонента маршрутизатора.

Создание маршрутов -

App.js

import React from 'react';
import { Routes, Route, Link } from 'react-router-dom';
import UserDetails from './UserDetails';
import './App.css';
function App() {
  const users = [1,2,3,4,5,6,7,8,9,10];
  return (
    <div className="">
      <div className="mx-20 flex gap-5 my-24">
        {
          users.map((user) => {
            return (
              <Link to={`users/${user}`}>User {user}</Link>
            )
          })
        }
      </div>
      <Routes>
        <Route path="users/:userId" element={<UserDetails />} />
      </Routes>
    </div>
  );
}
export default App;
  • Сначала мы импортировали Routes, Route и Link из react-router-dom.
  • Routes используется для того, чтобы обернуть в него весь компонент Route.
  • Маршрут используется для указания того, какой компонент будет отображаться по определенному пути или URL-адресу, путь предоставляется с использованием атрибута «путь», а компонент предоставляется с использованием атрибута «элемент».
  • Ссылка используется для перенаправления пользователя на путь, указанный в ссылке, с использованием атрибута «to». Мы сделали ссылку динамической, используя строку шаблона, и сопоставили значения пользовательского массива с компонентом Link с номером 1–10.
  • В атрибуте «путь» компонента маршрута мы использовали «users/:userId», двоеточие «:» используется для динамического маршрута, а доступ к параметрам можно получить, используя имя «userId», указанное в пути маршрута после двоеточия. .

Создание динамического компонента -

UserDetails.js

import React from 'react'
import {useParams} from 'react-router-dom';
function UserDetails() {
    const {userId} = useParams();
  return (
    <div>
        <h1 className="text-indigo-600 m-12">User {userId}</h1>
    </div>
  )
}
export default UserDetails
  • Мы использовали хук useParam для доступа к значениям параметров из URL-адреса.
  • как видите, мы использовали точно такое же значение «userId» для доступа к значению.
  • Вы можете проверить вывод, когда вы нажмете на любую ссылку, текст в компоненте UserDetail будет изменен.

СПАСИБО ЗА ПРОВЕРКУ ЭТОГО ПОСТА

Вы можете связаться со мной в -
Instagram — https://www.instagram.com/supremacism__shubh/
LinkedIn — https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Электронная почта — [email protected]

^^Вы можете помочь мне пожертвованием по ссылке ниже Спасибо👇👇 ^^
☕ → https://www.buymeacoffee.com/waaduheck ←

Также проверьте эти сообщения
https://dev.to/shubhamtiwari909/js-push-and-pop-with-arrays-33a2/edit

https://dev.to/shubhamtiwari909/tostring-in-js-27b

https://dev.to/shubhamtiwari909/join-in-javascript-4050

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90