React : 라우터(Route) 사용법. BrowseRouter, Routes, Route, Nested Routes,Outlet

1. 리액트 라우터(React Router)란? 

 

화면 전환을 해주는, 페이지 간에 이동하는 것처럼 보일 수 있게 하는 리액트 라이브러리.

리액트는 SPA (Single Page Application)이기 때문에, 페이지가 다른 페이지로 실제로 이동하는 것은 아니고 컴포넌트가 갈아끼워 진다는 의미라고 보면 된다. 리액트 자체적으로 이러한 기능이 없기 때문에 리액트 라우터를 통해 구현한다.

 

기존의 <a> 태그를 통한 페이지 전환은,

url 변경 시 새로고침이 되며 페이지의 모든 요소들을 다시 로드해야 하기 때문에 느리다는 단점이 있다.

 

반면 React는 SPA이기 때문에 Router를 사용하여 새로고침 없이 변경된 소스만 바꿔주도록 해줄 수 있습니다. 상대적으로 빠르고 UX가 좋다. 

 

2. BrowserRouter, Route, Routes

예시)

root.render ( 
	<BrowserRouter>
		<App />
	</BrowserRouter>
)

App 컴포넌트 안에서

Function App() {
	return (
		<Routes>
			<Route/>
			<Route/>
      		</Routes>
	)};

 

 

1) BrowserRouter

BrowserRouter은 HTML5의 History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경할 수 있도록 해줍니다.

(브라우저를 깜빡이지 않게하며 다른 컴포넌트로 갈아 끼울 수 있게 만들어 주는 것)

 

 

2) Routes

<Routes>
    <Route path=“/” element={ <div>시작 </div>}  />
    <Route path=“/home” element={ <div>홈 </div>}  />
    <Route path=“/detail” element={ <div>상세페이지 </div>}  />
</Routes>

switch(v5) -> routes(v6) 네이밍 변경

예전 react-router-dom v5 에서는 첫번째 path의 '/' 라는 것이 다른 '/'Home, '/'detail에도 다 포함되어 있기 때문에 /home을 입력하면 '/' 컴포넌트와 '/home' 컴포넌트가 모두 나타나는 문제가 있었다. 이것을 해결하기 위해 v5에서는 exact와 swtich를 썼었고, 그 중 switch 는 첫번째로 매칭되는 path 를 가진 컴포넌트를 렌더링 시키는 역할을 하였다. 현재는 v6로 넘어오면서 정확히 일치할 때만 이동 될 수 있게 변경 되었다.

 

현재의 Routes는 브라우저 url의 path 값을 찾아서 화면에 보여주는 역할을 한다.

 

 

 

3) Route

Route가 url 주소 이름을 커스터마이징 할 수 있게 한다.

 

라우트의 두가지 속성

path : 주소값을 의미한다. 예를들어 path = ‘/‘ 라면 기본값 페이지를 의미하고, /login, /main 이라면 각 login, main 컴포넌트들의 주소값을 의미한다.

element : 주소값을 통해 들어갔을 때 보여지는 내용을 의미. 컴포넌트 명 을 넣으면 컴포넌트가 보여진다. {<Login />}

 

<Route path="/detail" element={ <div> 상세페이지 </div> />

"/detail" 이라는 path 주소 값에 들어가면  div안에 '상세페이지' 라는 글자가 있는 페이지로 갈아 끼워질 수 있게 합니다.

 

 

<Route path=“/home” element={ <div>홈 </div>}  />

<Route path="/detail" element={ <div> 이거는 Detail로 이동해야만 보임 </div> />

 

하나의 Route는 하나의 페이지를 만드는 것 이라고 보면 되면 이해가 쉽다. 현재 2개의 페이지가 존재 하는 것.

 

위 코드를 통해서 /home과 /detail page 두개를 만든 것이다. detail페이지로 들어가면 ‘상세페이지’라는 div가 표기된다.

div가 아닌 다른 컴포넌트로 이동하고 싶다면, 목적지 컴포넌트를 Import로 받아오고, <div>자리에 그 컴포넌트를 넣으면 된다.  

 

 

3. 더 구체적인 경로 지정 + outlet

 

 페이지 안의 페이지로 들어가고 싶을 때 경로를 더 구체적으로 지정할 수 있다.

<Route path=“/about/member” element ={<Member />} />

 

+ 구체적 경로 지정의 다른 방식 : Nested Routes 방식

 

User라는 route 안에 Profile과 Account가 있는 상황.

 

function App() {
  return (
    <>
      <h1>React Router</h1>

      <nav>
        <Link to="/home">Home</Link>
        <Link to="/user">User</Link>
      </nav>

      <Routes>
        <Route index element={<Home />} />
        <Route path="home" element={<Home />} />
        <Route path="user" element={<User />}>
          <Route path="profile" element={<Profile />} />
          <Route path="account" element={<Account />} />
        </Route>
        <Route path="*" element={<NoMatch />} />
      </Routes>
    </>
  );
};

 

라우트 안에 라우트를 넣기.

 

<Route path="user" element={<User />}>
          <Route path="profile" element={<Profile />} />
          <Route path="account" element={<Account />} />
</Route>

 

 

Nested route로 접속시 두개의 Element가 다 보인다는 특징이 있다. 

/user 페이지에 있다면 Profile, Account 컴포넌트 두 개 다 보이는 것

 

<Routes>
  <Route path="/member" element={<Member />}>
  	<Route path=":memberId" element={<MemberInfo />} />
  </Route>
</Routes>


{/* Member */}
<div>
  <header>Member</header>
  <Outlet />  {/* MemberInfo의 component가 Outlet의 위치에 위치하게 된다. */}
</div>

 

이 때 <Outlet> </Outlet> 을 이용해서 상위 컴포넌트를 레이아웃화 할 수 있다.

상위 컴포넌트와 하위 컴포넌트를 동시에 다 보여줄 수 있다 !  

상위 컴포넌트 안에 <Outlet />으로 구멍을 뚫어 놓는 개념이다. 일단 상위 컴포넌트에 <Outlet>를 뚫어 놓으면 그 자리에 하위 컴포넌트가 들어오게 된다.

 

 

*tip

error 오류 404페이지 만들기

잘못된 링크로 들어갔을때 이 페이지는 없는 페이지라고 ui를 띄워주고 싶을 때

<Route path=”*” element ={<div> 없는페이지에요 </div>} />

위 코드의 뜻은 내가 지정한 path 를 제외한 모든 페이지에 들어갈 시 element를 띄워주세요.