[리액트] 화면 이동하기_💻 / React Router, useNavigate

 

[React_useNavigate]

 

리액트에서 화면 이동 방법에 대해 알아보자

 

---

 

<STUDY>

 

 

1. 리액트 라우터 설치

npm install react-router-dom
or
yarn add react-router-dom

 

 

2. 라이브러리 임포트

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

 

 

3. App.jsx - BrowserRouter

export default function App () => {
  return (
    <BrowserRouter>
      //컴포넌트
    </BrowserRouter>
  )
}

 

 

4. path 지정 - Routes, Route

``````

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Component1 from './Component1';
import Component2 from './Component2';
import Component3 from './Component3';
import NotFound from './NotFound';

``````

export default function App () => {
  return (
    <BrowserRouter>
      <Routes>
      
        <Route path='/' element={<Component1 />}></Route>
        
        <Route path='/path' element={<Component2 />}></Route>
        
        <Route path='/path_2' element={<Component3 />}></Route>
        
        <Route path='*' element={<NotFound />}></Route>
        
      </Routes>
    </BrowserRouter>
  )
}

 

  💡 Routes : Route 중 경로(path)가 일치하는 부분만 렌더링

 

  💡 Route : 경로(path)와 element(Component)를 입력

      ❕ path : " / " (메인이 되는 페이지 - 기본 경로), " /path " (url/path로 입력했을 때 해당 페이지로 이동)

      ❕ element : 해당 경로로 이동했을 때 보여줄 컴포넌트(페이지)

 

   💡 path = '*' : 올바르지 않은 경로로 이동한 경우 보여주는 경우 (NotFound) 

 

 

5. 페이지 이동 - useNavigate

``````

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

``````

export default function Component1 () {
  const navigate = useNavigate(); // navigation
  
  const goComponent2= () => {
    navigate('/path')  // Component2 페이지로 이동
  };
  
  return (
    <Button onClick={goComponent2}>
      Go Component2
    </Button>
  )
};

 

  💡 useNavigate : 페이지 이동 Hook

 

 

---

 

React에서 페이지를 이동할 수 있는 방법중 하나인 useNavigate에 대해 알아보았다.

 

<자세한 내용은 React Router 공식 홈페이지에서 확인할 수 있습니다.>

 

Declarative routing for React apps at any scale | React Router

 

---

 

내가 보려고 정리하는 리액트🔆

 

👉ez1n github 구경하기👈 

 

ez1n - Overview