2024.03.03 TIL - createBrowserRouter로 라우터 설정하기, outlet, GlobalStyles

createBrowserRouter

// ✅ App.tsx - nwitter(clone coding)

import { RouterProvider, createBrowserRouter } from "react-router-dom";
import Layout from "./components/Layout.tsx";
import Home from "./routes/Home.tsx";
import Profile from "./routes/Profile.tsx";
import { Login } from "./routes/Login.tsx";
import { CreateAccount } from "./routes/create-account.tsx";

const router = createBrowserRouter([
  {
    path: "/",
    element: (
      // ⭐️ Layout보여주기 전에, 로그인상태인지 확인하려고 ProtectedRoute 감싸줌
      <ProtectedRoute>
        <Layout />
      </ProtectedRoute>
    ),
    children: [	        
    // ⭐️ Layout에 outlet 줘서 아래는 children에 속하게 됨
    // ⭐️ 모든 하위 주소들은 /가 들어가니까 layout에 "/"를 주고, 아래는 "/"빼고 적어준것
      {
        path: "",
        element: <Home />,
      },
      {
        path: "profile",
        element: <Profile />,
      },
    ],
  },
  // ⭐️ layout에 속하지 않는 라우터 설정은 아래에서
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "/create-account",
    element: <CreateAccount />,
  },
]);

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

export default App;

outlet

// ✅ Layout.tsx - nwitter(clone coding)

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

const Layout = () => {
  return (
    <>
      <h2>layout</h2>
      <Outlet />	// ⭐️ ex. /profile 적으면 이 자리에 <Profile/>이 오는것임
    </>
  );
};

export default Layout;

GlobalStyles

// ✅ App.tsx - nwitter clone coding

import { createGlobalStyle } from "styled-components";
import reset from "styled-reset";

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;