[TIL] React router6

 

6.4버전의 라우터를 쓰면 data Apis 기능을 사용할 수 있다.

• createBrowserRouter 
• createMemoryRouter 
• createHashRouter 
• createStaticRouter 

이 라우터는 data Apis 사용X

• <BrowserRouter>
• <MemoryRouter>
• <HashRouter>
• <NativeRouter>
• <StaticRouter>

https://reactrouter.com/en/main/routers/picking-a-router#data-apis

 

---

1. createBrowerRouter

• 모든 리액트 웹 프로젝트에서 권장되는 라우터임
• History API를 사용해서 히스토리 스택을 관리할 수 있음
• 리액트 트리 외부에 라우터를 만들어야 됨 
  : component fetching and render fetchchains
   (https://remix.run/blog/remixing-react-router#component-fetching-and-render-fetch-chains)

import React from 'react';
import ReactDOM from 'react-dom/client'; 
import { RouterProvider ,createBrowserRouter} from 'react-router-dom';
import Home from "./screens/Home"
import About from "./screens/About"
import Root from "./Root"

// 리액트 트리 외부에 라우터를 만들어야 됨 
const router = createBrowserRouter([ // createBrowserRouter
    {
    path: '/',
    element : <Root/>,
    children:[
        {
            path: '',
            element : <Home/>
        },
        {
            path: 'about',
            element : <About/>
        },
    ]
    },
    
])

 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(   
    <RouterProvider router={router}/> // RouterProvider: 컴포넌트에 라우터 객체 전달
);

 

2. Outlet

1) Root요소와 children요소

• Outlet은 부모 루트요소에서 사용해야 함.
• UI nesting 이 가능하다. 부모 루트요소에서 자식 루트요소 렌더하는 식
  (페이지가 변해도 고정적으로 있는 sidebar, 헤더,푸터 등 구현시 용이)
• 이 코드 예제에선 Outlet에 Home, About이 들어가게 된다.

router nesting

출력결과

 

2) children요소 안에 또다른 children요소 네스팅

• Outlet은 부모 루트요소

// Router.js
const router = createBrowserRouter([
    {
    path: '/',
    element : <Root/>,
    children:[
        {
            path: '',
            element : <Home/>,
            errorElement: <ErrorComponent/>
        }, 
        ...
        {
            path: 'users/:userId', // [1]'/users/1' 경로에서 User컴포넌트가 렌더되고
            element : <User/>,
            children :[   
                {
                path:'followers', // [2]'/users/1/follwers' 경로일 때 Follwers컴포넌트가 렌더됨
                element:<Follwers/>
                }
             ]
        },
    ],
    errorElement: <NotFound/>
    }
]) 

// User.js
import React from 'react';
import { Outlet, useParams,Link} from 'react-router-dom';
import {users} from '../../db';

const User = () => {
    const {userId} = useParams()
 
    return (
       <div>
         <h1>ID : {userId} , Name : {users[+userId - 1].name} </h1>
         <hr/> 
         <Link to="followers">See followers</Link> /* [3]'/users/1/follwers'로 됨  */
         <Outlet/> /* [4]Follwers 컴포넌트 렌더 위치 */
       </div>
    );
}

Root컴포넌트, User컴포넌트, Follwers컴포넌트 네스팅

 

3. errorElement

createBrowserRouter 사용시만 사용 가능함, (BrowserRouter에서는 x)

 

 1) 404 NotFound

• root요소 path에 에러 추가 가능
• 아무 자식요소가 라우팅되지 않았을 때 에러페이지가 뜬다

2) 에러 버블링 막기
한 루트 요소에서 에러 발생시 해당 루트에 errorelement가 없다면 에러는 부모 루트로 버블링되어 전파된다.

만약 Home 컴포넌트에서 에러가 발생하면 Root요소까지 전달되어 404 Not Found 페이지가 나오는데,
이렇게되면 멀쩡한 About컴포넌트도 실행되지 않게된다.

그러나 Home요소 루트에 errorElement를 넣으면 버블링을 막아 다른 요소의 실행에 영향을 미치지 않을 수 있다.

import { createBrowserRouter } from "react-router-dom";
import NotFound from "./screens/NotFound";
import ErrorComponent from "./components/ErrorComponent"

const router = createBrowserRouter([
    {
    path: '/',
    element : <Root/>,
    children:[
        {
            path: '',
            element : <Home/>,
            errorElement: <ErrorComponent/> // 컴포넌트 오류시 다른 컴포넌트 실행에 영향x
        },
        {
            path: 'about',
            element : <About/>
        },
    ],
    errorElement: <NotFound/> // 자식 라우터와 매칭되는 주소가 없으면 404 NotFound 페이지 뜬다.
    },
    
]) 

export default router

Home 컴포넌트 오류시, Root About컴포넌트의 실행에는 영향이 없다

 

4. useNavigate

 

5. useOutletContext

• 부모 컴포넌트에서 Outlet 자식 컴포넌트에게 값을 공유하고 싶을때 씀.
• Outlet에 들어가는 자식 컴포넌트가 여러개라면 그 모든 자식 컴포넌트(Child1, Child2)에 다 공유됨.

// router.js
const router = createBrowserRouter([
    {
    path: '/',
    element : <Parent/>,
    children:[
        {
            path: 'child1',
            element : <Child1/>, 
        },
        {
            path: 'child2',
            element : <Child2/>
        }, 
      ], 
    }, 
]) 

// Parent.js
function Parent() {
  const [count, setCount] = React.useState(0);
  return <Outlet context={[count, setCount]} />; // Outlet의 빌트인 기능인 context속성 사용
}

// Child1.js
import { useOutletContext } from "react-router-dom"; 

function Child() {
  const [count, setCount] = useOutletContext(); // 모든 Outlet 자식 컴포넌트에 공유된다.
  const increment = () => setCount((c) => c + 1);
  return <button onClick={increment}>{count}</button>;
}

6. useParams

"패스파라미터"에 쓴 "변수명"을 useParams로 받아올 수 있다.

const User = () => {
    const {userId} = useParams() // "/user/1" => 1 , "/user/2" => 2
 
    return (
        <div>
            ...
        </div>
    );
}

 

7. useSearchParams

• 현재 URL주소의 "쿼리파라미터"를 읽거나 수정할 때 쓰임 
• 인코딩 된 쿼리 스트링의 문자열을 parsing하는 역할

 

[쿼리 스트링 값 읽고 네비게이트 하기]

import { useSearchParams } from "react-router-dom"

function Home(){ 
    const [readSearchParams,setSearchParams] =useSearchParams()

    // 단순히 현재 경로에 쿼리파라미터를 붙여주는 방식
    const onClickSeach = () => {
            setSearchParams({
               product:'유자',
               show:'on'
           }) 
      };

    // 쿼리파라미터 읽기
    console.log(readSearchParams.get('product')) // 유자
    console.log(readSearchParams.has('product')) // true
    
    return (
     <div>
        ...
     </div>
    )
}

 

8.BrowerRouter 네스팅

(https://ui.dev/react-router-nested-routes/)

방법1. router에서 경로 설정 후, 자식 컴포넌트는 outlet으로 위치 표시

Outlet에 /btc-bitcoin/chart 일 때 Chart컴포넌트가, /btc-bitcoin/price 일 때 Price 컴포넌트가 들어감

방법2. router에서는 *로 모든 경로를 받게끔만 해놓고, 컴포넌트에서 직접 경로 설정
Routes가 상대경로도 지원하기 때문에 path="chart"와 같이 써도 동작함