안녕하세요 여러분 오늘 저는 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;

먼저 react-router-dom에서 경로, 경로 및 링크를 가져왔습니다.

Routes는 그 안에 있는 모든 Route 구성 요소를 래핑하는 데 사용됩니다.

경로는 특정 경로 또는 URL에서 렌더링할 구성 요소를 지정하는 데 사용되며 경로는 "경로"속성을 사용하여 제공되고 구성 요소는 "요소"속성을 사용하여 제공됩니다.

링크는 "to"속성을 사용하여 링크에 제공된 경로로 사용자를 리디렉션하는 데 사용됩니다. 템플릿 문자열을 사용하여 링크를 동적으로 만들고 사용자 배열의 값을 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

URL에서 매개변수 값에 액세스하기 위해 useParam 후크를 사용했습니다.

보시다시피 값에 액세스하기 위해 정확히 동일한 값 "userId"를 사용했습니다.

출력을 확인할 수 있습니다. 링크를 클릭하면 UserDetail 구성 요소의 텍스트가 변경됩니다.

이 게시물을 확인해 주셔서 감사합니다.

저에게 연락하실 수 있습니다 -
인스 타 그램 -
링크드인 -
이메일 - [email protected]

^^ 아래 링크에서 기부로 저를 도울 수 있습니다 감사합니다👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

이 게시물도 확인하십시오.