라우터(Router) 라이브러리(v6)

사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라고 생각할 수 있다.

리액트에서는 라우팅 관련 라이브러리가 많이 있는데, 이중 가장 많이 사용한다.

 

설치

//기본적인 설치 방법
npm install react-router-dom

//버전 업데이트 방법 (@버전)
npm install react-router-dom@6

 

선언 방법

//최상단에 선언
import { BrowserRouter } from 'react-router-dom';

//사용할 곳에 선언 (index에 감싸주지 않았으면 BrowserRouter를 최상단에 감싸줘야한다.)
import { BrowserRouter, Routes, Route, useNavigate, Outlet } from 'react-router-dom';

//

 

사용 방법

1. <BrowserRouter> 최상단에 선언

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

 

2. <Routes>와 <Route>

보여줄 페이지를 정의하는 곳

<Routes>
	<Route path='/' element={<div>멤버임</div>}></Route>
  <Route path='/about' element={<About />}></Route>
	<Route path='/event' element={<Event />} />
  <Route path='*' element={<><h1>404</h1><div>없는페이지에요~</div></>} />
</Routes>

//params 전달하기
  <Route path='/about' element={<About 데이터={데이터 이름} />}></Route>

• 패스(path) : 페이지 경로를 만들어주면 된다.
  • path='*' : 잘못된 경로로 입력할 경우 404페이지를 보여줄 수 있다.
• 엘리먼트(element) : 경로에 맞는 원하는 컴포넌트를 보여주면 된다.

 

3. <Link>

지정한 경로로 이동합니다.

<Link to="/">Home</Link>
<Link to="/detail/0">상세페이지</Link>

• to : 이동할 경로를 정의해주며 클릭시 해당 URL로 이동합니다.

✅ Link와 <a>태그의 차이점

• Link : 브라우저의 주소만 바꿀 뿐 페이지 자체를 새로고침하지 않는다.
• <a> : 브라우저의 주소를 이동하며 페이지 자체를 새로고침한다.

 

4. useNavigate

특정 이벤트가 발생할때 url을 조작할 수 있는 인터페이스를 제공한다.

//useNavigate는 hook 형태다
let navigate = useNavigate();

<Nav className="me-auto">
  <Nav.Link onClick={()=>{navigate('/')}}>Home</Nav.Link>
  <Nav.Link onClick={()=>{navigate('/about')}}>About</Nav.Link>
  <Nav.Link onClick={()=>{navigate('/detail/0')}}>Detail</Nav.Link>
  <Nav.Link onClick={()=>{navigate('/event')}}>Event</Nav.Link>
</Nav>

✅ Link와 Navigate의 차이점

• Navigate 는 특정 행동을 했을 때 해당 주소로 이동해줄 수 있게 만들어줍니다.
• Link 는 특정 주소로 이동해주는 태그다.

4-1.useHistory 기능 포함

앞으로 가기, 뒤로 가기 기능을 제공한다.

<button onClick={() => navigate(-2)}> Go 2 pages back </button>
<button onClick={() => navigate(-1)}> Go back </button>
<button onClick={() => navigate(1)}> Go forward </button>
<button onClick={() => navigate(2)}> Go 2 pages forward </button>

 

5. nested routes, outlet

특정 라우터안에 서브 페이지로 보여줄 자식 컴포넌트들을 지정해줄 수 있다.

부모 컴포넌트의 작성된 태그들과 함께 보여지며 아웃렛(Outlet)을 선언한 곳에 컴포넌트가 나타난다.

<Route path='/about' element={<About />}>
  <Route path='member' element={<div>멤버임</div>}/>
</Route>

function About(){
  return(
    <>
      <h4>회사정보입니다.</h4>
      <Outlet></Outlet>
    </>
  )
}

• 라우터 안에 원하는 컴포넌트들을 자식 태그로 넣어서 사용하면 된다.
• Outlet : 라우터 안에 있는 컴포넌트들을 보여줄 곳을 지정하면 된다.

 

 

 

 

참고 사이트

 

[React] 6. React Router (리액트 라우터) 사용하기