WEB/ReactJS
[React] React Router
다콩잉
2023. 6. 28. 13:33
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;
728x90