저번 React Router Dom에 이어 React Router Dom APIs에 대하여 공부하기💻
<BrowserRouter>
<Routes>
{/* App 컴포넌트에 Header, Footer 등 Layout */}
<Route path="/" element={<App />}>
{/* localhost:3000/ 경로 => Home 컴포넌트 */}
<Route index element={<Home />} />
{/* localhost:3000/teams 경로 => Teams 컴포넌트가 Layout */}
<Route path="teams" element={<Teams />}>
{/* localhost:3000/teams/13 경로 => Team 컴포넌트 */}
<Route path=":teamId" element={<Team />} />
<Route path="new" element={<NewTeamForm />} />
{/* localhost:3000/teams 경로 => LeagueStandings 컴포넌트 */}
<Route index element={<LeagueStandings />} />
</Route>
</Route>
</Routes>
</BrowserRouter>
funciton App() {
return (
<div>
<h1>Hello World!</h1>
<nav>
<Link to="/">Home</Link>
<Link to="teams">Teams</Link>
</nav>
<div className="content">
<Outlet />
</div>
</div>
);
}
import { useNavigate } from "react-router-dom";
funciton SignupForm() {
let navigate = useNavigate();
async function handleSubmit(e) {
e.preventDefault();
await submitForm(e.target);
navigate("../success", { replace: true });
}
return <form onSubmit={handleSubmit}>{*/ ... */}</form>;
}
import { Routes, Route, useParams } from "react-router-dom";
function App() {
return (
<Routes>
<Route
path="invoices/:invoiceId"
element={<Inovice />}
/>
</Routes>
);
}
function Invoice() {
let params = useParams();
return <h1>Invoice {params.invoiceId}</h1>;
}
import * as React from 'react';
import { useLocation } from "react-router-dom";
function App() {
let location = useLocation();
React.useEffect(() =>{
ga('send', 'pageview');
}, [location]);
return (
// ...
);
}
import * as React from 'react';
import { useRoutes } from "react-router-dom";
function App() {
let element = useRoutes([
{
path: "/",
element: <Dashboard />,
children: [
{
path: "messages",
element: <DashboardMessages />
},
{ path: "tasks", element: <DashboardTasks /> }
]
},
{ path: "team", element: <AboutPage /> }
]);
return element;
}