[TIL]React/Typescript react-router-dom v6

오늘 공부한것 & 기억할 내용

BrowserRouter / Routes

• BrowserRouter : 이동하는 페이지들을 생성할때 감싸주는 역할
• Routes : v5에선 swith를 사용하였지만 v6에선 Routes를 사용한다.

const Router= () => {
    return (
    <BrowserRouter>
        <Header/>
        <Routes>
            <Route path="/" element={<Home/>}/>
            <Route path="/about" element={<About/>}/>
        </Routes>
    </BrowserRouter>
    )
}

createBrowserRouter

• BrowserRouter대신 createBrowserRouter사용
• Router를 array형식으로 표현

//Router.ts
const router = createBrowserRouter([
  {
  	//첫번째 route는 컨테이너와 같은 역할
    path:"/",
    element:<Root />
    children:[
    	{
  			path:"",
    		element:<Home />
  		},
    	{
  			path:"about",
    		element:<About />
  		}
    ]
  }
])

//Root.tsx (App.tsx를 바꾼것)
//Router.ts안의 router에서 chlidren을 보이게 하기 위해 Outlet 사용
//Outlet은 자식들이 보여지는 위치이고 그 외에는 공통으로 보여질 컴포넌트들을 넣을 수 있다.
return(
	<>
  		//어디에서든 공통으로 보여진다
  		<Header />
  		//children자리
  		<Outlet />
  	</>
)

 //index.tsx
  import router from "./Router"
 render(
  	<React.StrictMode>
  		//App.tsx대신 RouterProvider가 들어간다
  		<RouterProvider router={router}
  	</React.StrictMode>
  )

errorElement

• Route 경로가 잘못 되었을때, 컴포넌트가 충돌 되었을때 에러메세지를 보낼 수 있다

//Notfount.tsx
return(
	<h1>404 Not found</h1>
)

//Router.ts
const router = createBrowserRouter([
  {
  	//첫번째 route는 컨테이너와 같은 역할
    path:"/",
    element:<Root />
    children:[
    	{
  			path:"",
    		element:<Home />,
    		//컴포넌트가 충돌 / 에러날때 
    		errorElement:<ErrorComponent / >
  		},
    	{
  			path:"about",
    		element:<About />
  		}
    ],
    //경로가 잘못되었을때
    errorElement:<NotFount / >
  }
])

useNavigate

• 이동시키는 기능

useParams

• url에 있는 parameter를 사용할 수 있다.

const {userId} = useParams();
console.log(userId) // 1


//Router.ts
const router = createBrowserRouter([
  {
    path:"/",
    element:<Root />
    children:[
    	{
    		//user페이지가 있다면 children으로 페이지가 보이게 해야한다
  			path:"user",
    		element:<UserPage />,
    		children:[
    			{
  				path:":userId",
    			element:<User />
  				}
    		]
  		}, 
        {
            //user페이지가 볼게 없다면 바로 이렇게 만들 수 있다. 
  			path:"user/:userId",
    		element:<User />
  		} 
    ],
	//경로가 잘못되었을때
    errorElement:<NotFount / >
  }
])

useOutletContext

• Outlet으로 사용하는 자식에게 데이터를 보내주고 싶을때 사용

//user.tsx
<Outlet context={{
                nameOfMyUser : user[Number(userId) - 1].name
                }}
                
//Followers.tsx
const {nameOfMyUser} = useOutletContext();
console.log(nameOfMyUser) //nico

배운점 & 느낀점

react-router-dom v6에서 업그레이드 된것을 배웠는데 확실히 v5보다 사용하기 편리한거같다.