React_라우터_링크와 에러페이지

App

import HomePage from "./pages/Home"

import Products from "./pages/Products"

import RootLayout from "./pages/root";

import Error from "./pages/Error";

import { createBrowserRouter, RouterProvider } from "react-router-dom"

const router = createBrowserRouter(           //여러 사이트를 연결하기 때문에 배열로 정렬

  [{

    path: "/",

    element: <RootLayout/>,

    errorElement: <Error/>,                   //연결되지 않은 페이지일 경우, 이동

    children: [

      {path: "/", element: <HomePage/>},

      {path: "/products", element: <Products/>},

    ]

  }]

);

export default function App(){

  //1. npm install react-router-dom

  return(

    <>

      <h1>App</h1>

      <RouterProvider router={router}></RouterProvider>

    </>

  )

}

 

Error

import MainNavigation from "../components/MainNavigation"

export default function Error(){

    return(

        <>

            <MainNavigation></MainNavigation>

            <hr></hr>

            <h1>Error페이지</h1>

        </>

    )

}

 

MainNavigation

import { Link } from "react-router-dom";

export default function MainNavigation(){

    return(

        <>

            <Link to="/">Home</Link><br></br>

            <Link to="/products">Products</Link><br></br>

            <Link to="/error">Error</Link><br></br>

        </>

    )

}

 

Home

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

export default function Home(){

    return(

        <>

            <h1>My Home Page</h1>

            <Link to="/">Home</Link>

            <Link to="/products">Products</Link>

        </>

    )

}

 

root

import { Outlet } from "react-router-dom";

import MainNavigation from "../components/MainNavigation"

export default function RootLayout(){

    return(

        <>

        <MainNavigation></MainNavigation>

        <hr></hr>

        <Outlet></Outlet>

        </>

    )

}

 

products

export default function Products(){

    return(

        <>

            <h1>The Products Page</h1>

        </>

    )

}