(React) Route - createBrowserRouter

BrowserRouter 를 쓸 것인가 createBrowserRouter 를 쓸 것인가?

BrowserRouter 보다 createBrowserRouter 를 써야 하는 이유는 다음과 같다.

• 하부 링크가 가능 (링크 화면에서 한번 더 링크)
• 각 링크 컴포넌트 별로 에러 처리가 가능
• 데이터 Fetch 가능

일단 맛보기로 BrowserRouter 를 간단한 소스코드를 소개 (React v5에서는 Switch를 v6에서는 Routes를 사용)

import {BrowserRouter,Routes,Route,Link} from "react-router-dom"; function App() {   return (     <BrowserRouter>       <Routes>         <Route path="/" element={<Home />} />         <Route path="users/*" element={<Users />} />       </Routes>     </BrowserRouter>   ); }

 

createBrowserRouter 

npm i react-router-dom

 

샘플의 화면 구성과 이에 해당하는 컴포넌트들

 

App.js1

createBrowserRouter 를 작성해 <RouterProvider /> 컴포넌트의 파라미터로 넘겨준다

import Contact from "./components/Contact";  import MainPage from "./components/MainPage";  import Home from "./components/Home";  import './App.css';  function App() {  const router = createBrowserRouter([     {        path: "/",        errorElement: <ErrorPage/>,        element : <MainPage/>,        children: [                             {                                    path: '/',                                    element: <Home/>,                             },                             {                                    path: "about",                                    element: <About/>,                                    {* 하부 링크 *}                                    children: [                                                         {                                                                path: 'contact',                                                                element: <Contact/>,                                                         }                                                  ]                             },                      ]     }  ])   return (                <RouterProvider router={router}/>             );  }   export default App;

MainPage.js

전체 페이지 구성

<Outlet/> 컴포넌트는 링크에 해당하는 컴포넌트로 렌더링 되게 된다.

import React from 'react'  import Header1 from './Header1'  import { Outlet } from 'react-router-dom'  export default function MainPage() {     return (                  <div>                   <Header1/>                   <Outlet/>                   </div>                )  }

Header1.js   

탑 메뉴

import React from 'react'  import '../App.css'  import { Link } from 'react-router-dom'  import Home from './Home'  export default function Header1() {       return (                    <div class="topnav">                        <a href='#'>Header1</a>                        <div class="topnav-right">                                 <Link to='/'>Home</Link>                                 <Link to='about'>About</Link>                         </div>                     </div>                  )  }

Home.js 

링크 Home 을 클릭시 MainPage의 <Outlet/> 에 렌더링 

import React from 'react'  export default function Home() {         return (                      <div>                           <h1>HOME</h1>                      </div>                   )  }

About.js

링크 About 을 클릭시MainPage의 <Outlet/> 에 렌더링, 또한 Contact us 를 클릭시 밑의 <Outlet/> 에 렌더링

import { Link, Outlet } from 'react-router-dom';  export default function About() {           return (                       <div className='flex flex-col items-center justify-center mt-10 pl-7 pr-7'>                            <h1>About</h1>                             <p><Link to="contact">Contact us ⬇️</Link></p>                             <Outlet/>                       </div>                     )  }

 

 

Contact.js 

About 페이지의 Contact us 클릭시 같은 페이지의 하부 <Outlet/> 에 렌더링

import React from 'react'  export default function Contact() {           return (                       <div>                           <h1>CONTACT</h1>                       </div>                     )  }

 

다른 기능 소개

• Route Parameters

UserProfile 컴포넌트에 userId를 파라미터로 넘겨준다.

• Data Fetching

Home 컴포넌트의 렌더링 전에 데이터를 페치하여 Home 에 파라미터로 넘겨준다.

• Lazy Loadin

Lazy 와 Suspense 를 이용하여 필요시에 Loading ... 메세지를 뿌려준다.