[React] react - router 에 대해서 알아보자

 

각 페이지들을 이동시키기에 편하게 해주는 라이브러리가 있습니다.

 

https://reactrouter.com/en/main

Home v6.21.2 | React Router

 

react router DOM 6는 React 애플리케이션에서 라우팅을 관리하기 위한 라이브러리 입니다.

 

<Routes>, <Route>, <Link>, <useNavigate>. <Outlet> 등 라우팅을 도와주는 요소들이 있습니다.

---

 

<Routes>, <Route> 는 path 뒤에 들어가는 경로주소를 적고 elemet에 원하는 소스를 입력하게 되면 해당 경로로 갈때 적어놓은 소스가 보여집니다. 또한, <Route> 안에 또 다른 <Route>를 쓸 경우 /detail/member 처럼 경로를 명시할 수 있고, 이 방법은 같은 페이지 내에서 박스 같이 작은 요소가 변경이 될 때 사용됩니다.

<Route path="/detail" element={<SubPage />}>
	<Route path="member" element={<div>멤버임</div>} />
	<Route path="location" element={<div>위치임</div>} />
</Route>

 

위 소스에서 안에 들어가는 <Route> 에서 상위 경로에 <Outlet>이 없는 경우 element 이후에 들어가는 소스가 들어가지 않습니다. 상위 경로의  elemet 안에는

<>
 <div>상세페이지임</div>
 <Outlet></Outlet>
</>

 

위 소스와 같이 들어가야 합니다.

 

 

또한, 유저가 이상한 경로로 접속했을 때 " 없는 페이지입니다"  및 404 를 보여주고 싶다면

<Route path="*" element={ <div>없는페이지임</div> } />

 

위 소스 처럼 path ="*" 를 적어주어 명시된 경로를 제외한 나머지는 없는 페이지를 보여주게 하면 됩니다.

---

 

<Link> 는  url 뒤 /main 으로 이동 시켜주는 요소입니다.

<Link to="/main">홈</Link>

---

 

< useNavigate > 는  경로 이동 버튼처럼 동적으로 사용할 수 있는 UI 입니다.

let navigate = useNavigate();

...

 <Nav.Link onClick={() => {
	navigate("/main");}
    }> Home
</Nav.Link>

 

위 소스 처럼 변수를 지정해 주고 원할때 사용하여 원하는 경로로 이동할 수 있는 이벤트를 만들 수 있습니다.