[React Exam] react-router-dom 사용해보기 2

다음과 같이 코드를 이용해서 작성해도 같은 결과 입니다.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';   let router = createBrowserRouter(   [     {       path: "/",       element: <h2>Hello world!!<br/>Hello Router!!</h2>,     },   ], ); function App1() {   return <RouterProvider router={router} />; } export default App1;

 

 

위 처럼 엄청난 경고가 나타납니다. 다음과 같이 추가 하면 경고가 사라집니다.

import { createBrowserRouter, RouterProvider } from 'react-router-dom'; // // https://reactrouter.com/en/main/upgrading/future 참조 let router = createBrowserRouter(     [         {             path: "/",             element: <h2>Hello world!!<br/>Hello Router!!</h2>,         },     ],     { future : {         v7_fetcherPersist: true,         v7_normalizeFormMethod: true,         v7_partialHydration: true,         v7_relativeSplatPath: true,         v7_skipActionErrorRevalidation: true         }     } ); function App2() {   return <RouterProvider router={router} future={{v7_startTransition: true}}/>; } export default App2;

 

 

다음과 같이 라우터를 배열로 구성합니다.

import { createBrowserRouter, RouterProvider } from 'react-router-dom'; import Menu from './components/Menu'; import Home from './components/Home'; import Page1 from './components/Page1'; import Page2 from './components/Page2'; import ErrorPage from './components/ErrorPage'; let router = createBrowserRouter(     [         {             path: "/",             element: <Menu/>,             errorElement: <ErrorPage/>,         },         {             path: "/home",             element: <Home/>,         },         {             path: "/page1",             element: <Page1/>,         },         {             path: "/page2",             element: <Page2/>,         },     ],     { future : {         v7_fetcherPersist: true,         v7_normalizeFormMethod: true,         v7_partialHydration: true,         v7_relativeSplatPath: true,         v7_skipActionErrorRevalidation: true         }     } ); function App3() {   return <RouterProvider router={router} future={{v7_startTransition: true}}/>; } export default App3;

 

 

다음과 같이 children 속성을 이용하여 라우터를 중첩가능합니다.

import { createBrowserRouter, RouterProvider } from 'react-router-dom'; import Menu2 from './components/Menu2'; import Home from './components/Home'; import Page1 from './components/Page1'; import Page2 from './components/Page2'; import ErrorPage from './components/ErrorPage'; let router = createBrowserRouter(     [         {             path: "/",             element: <Menu2/>,             errorElement: <ErrorPage/>, // 에러페이지 지정             children : [                 {                     index:true, // 변경                     element: <Home/>,                 },                 {                     path: "page1",                     element: <Page1/>,                 },                 {                     path: "page2",                     element: <Page2/>,                 },             ],         },     ],     { future : {         v7_fetcherPersist: true,         v7_normalizeFormMethod: true,         v7_partialHydration: true,         v7_relativeSplatPath: true,         v7_skipActionErrorRevalidation: true         }     } ); function App4() {   return <RouterProvider router={router} future={{v7_startTransition: true}}/>; } export default App4;