[React] React Router

React Router란?

React Router는 브라우저의 URL 경로에 따라 다른 컴포넌트를 렌더링하고, 애플리케이션의 상태를 업데이트하며, 페이지 전환을 처리하는 기능을 제공합니다. 이를 통해 사용자가 다른 경로로 이동하거나 애플리케이션의 상태를 변경할 때 페이지 전체를 다시 불러오지 않고도 부분적인 업데이트를 할 수 있습니다.

 

V5

Router.tsx

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Header from "./components/Header";
import Home from "./screens/Home";
import About from "./screens/About";
function Router() {
    return (
        <>
            <BrowserRouter>
                <Header />
                <Routes>
                    <Route path="/home" element={<Home />}></Route>
                    <Route path="/about" element={<About />}></Route>
                </Routes>
            </BrowserRouter>
        </>
    );
}

export default Router;

 

 

V6

install

npm i react-router-dom@6.4

Router.tsx

import { createBrowserRouter } from "react-router-dom";
import Home from "./screens/Home";
import About from "./screens/About";
import App from "./App";

const router = createBrowserRouter([
    {
        path: "/",
        element: <App />,
        children: [
            {
                path: "about",
                element: <About />,
            },
            {
                path: "",
                element: <Home />,
            },
        ],
    },
]);

export default router;

App.tsx

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

function App() {
    return (
        <div>
            <Outlet />
        </div>
    );
}
export default App;

Home.tsx

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

About.tsx

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