React Router 기본 사항 이해: React에서 탐색 관리

예:

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

   const Navigation = () => {
     return (
       <nav>
         <Link to="/">Home</Link>
         <Link to="/about">About</Link>
       </nav>
     );
   };

1. 탐색 사용:
   • useNavigate 후크는 프로그래밍 방식으로 다른 경로를 탐색하는 데 사용됩니다.
   • 이 후크는 일반적으로 이벤트 핸들러나 부작용 내부에서 사용됩니다.

예:

   import { BrowserRouter } from 'react-router-dom';

   const App = () => {
     return (
       <BrowserRouter>
         <Routes />
       </BrowserRouter>
     );
   };

기본 라우팅 예시

다음은 기능적인 React 앱에서 React Router를 보여주는 기본 예입니다.

   import { Routes, Route } from 'react-router-dom';

   const Routes = () => {
     return (
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/about" element={<About />} />
       </Routes>
     );
   };

설명:

• BrowserRouter 구성요소는 라우팅을 활성화하기 위해 전체 앱을 래핑합니다.
• 링크 구성요소는 페이지 새로고침을 실행하지 않는 탐색 링크를 생성하는 데 사용됩니다.
• 경로 구성 요소에는 모든 경로가 포함되어 있으며 각 경로 요소는 URL 경로를 구성 요소(예: 홈, 정보 또는 연락처)에 매핑합니다.
• 링크를 클릭하면 URL이 업데이트되고 해당 구성 요소가 렌더링됩니다.

중첩 라우팅

React Router는 중첩 경로도 지원하므로 다른 경로 내에서 경로를 정의할 수 있습니다.

   <Route path="/" element={<Home />} />

설명:

• /dashboard 경로에는 /dashboard/profile 및 /dashboard/settings라는 중첩 경로가 있습니다.
• 상위 경로(path="dashboard/*")에서 * 와일드카드를 사용함으로써 React Router는 대시보드 구성 요소 내부에 하위 경로를 렌더링하는 것을 알고 있습니다.

Navigate로 리디렉션

Navigate 구성 요소 또는 useNavigate 후크를 사용하여 프로그래밍 방식으로 사용자를 다른 경로로 탐색할 수 있습니다.

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

   const Navigation = () => {
     return (
       <nav>
         <Link to="/">Home</Link>
         <Link to="/about">About</Link>
       </nav>
     );
   };

설명:

• Navigate 구성 요소는 렌더링될 때 자동으로 사용자를 /about 경로로 리디렉션합니다.

경로 매개변수

URL에 값을 전달하는 데 사용할 수 있는 경로 매개변수를 포함하여 동적 경로를 정의할 수 있습니다.

   import { useNavigate } from 'react-router-dom';

   const Login = () => {
     const navigate = useNavigate();

     const handleLogin = () => {
       // Perform login logic
       navigate('/dashboard');
     };

     return (
       <button onClick={handleLogin}>Login</button>
     );
   };

설명:

• 경로 경로의 :userId는 경로 매개변수입니다.
• useParams 후크는 UserProfile 구성 요소 내에서 URL에서 userId 값을 추출하여 페이지에 렌더링하는 데 사용됩니다.

결론

React Router를 사용하면 React 애플리케이션의 뷰 간을 쉽고 효율적으로 이동할 수 있습니다. BrowserRouter, Route, Link와 같은 구성 요소와 useNavigate와 같은 후크를 사용하면 복잡한 라우팅 논리를 사용하는 동적 단일 페이지 애플리케이션을 만들 수 있습니다. 경로 처리, 중첩 경로, 경로 매개변수 등 React Router의 기본 사항을 이해하면 React 앱에서 탐색을 쉽게 관리할 수 있습니다.

위 내용은 React Router 기본 사항 이해: React에서 탐색 관리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!