02. Routing

본시모니 2025. 4. 11. 09:57

layout.tsx

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

export default function Layout(){
    return(
        <>
            <h2>layout</h2>
            <Outlet />
        </>
    )
}

App.tsx

import { useState } from 'react'
import { createBrowserRouter, RouterProvider} from 'react-router-dom';
import Layout from './components/layout';
import Home from './routes/home';
import Profile from './routes/profile';
import Login from './routes/login';
import CreateAccount from './routes/create-account';
import { createGlobalStyle } from 'styled-components';
import reset from "styled-reset";

const router = createBrowserRouter([
  {
    path:"/",
    element:<Layout />,
    children: [
      {
        path: "",
        element: <Home />
      },
      {
        path: "profile",
        element: <Profile />
      }
    ]
  },
  {
    path: "/login",
    element: <Login />
  },
  {
    path:"/create-account",
    element: <CreateAccount />
  }
]);

const GlobalStyles = createGlobalStyle`
   ${reset};
   * {
     box-sizing: border-box;
   }
   body {
     background-color: black;
     color:white;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   }
 `;

function App() {
  return <>
    <GlobalStyles />
    <RouterProvider router = {router} />
  </>;
}

export default App

create-account.tsx

export default function CreateAccount(){
    return <h1>create accrount</h1>;
}

home.tsx

export default function Home(){
    return <h1>Home!</h1>
}

login.tsx

export default function Login(){
    return <h1>login</h1>;
}