Routing (রাউটিং)

import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router";
import App from "./app";
 
ReactDOM.createRoot(document.getElementById("root")).render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
    </Routes>
  </BrowserRouter>
);

<Routes>
  <Route index element={<Home />} />
  <Route path="about" element={<About />} />
 
  <Route element={<AuthLayout />}>
    <Route path="login" element={<Login />} />
    <Route path="register" element={<Register />} />
  </Route>
 
  <Route path="concerts">
    <Route index element={<ConcertsHome />} />
    <Route path=":city" element={<City />} />
    <Route path="trending" element={<Trending />} />
  </Route>
</Routes>

<Routes>
  <Route path="dashboard" element={<Dashboard />}>
    <Route index element={<Home />} />
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>

export function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />
    </div>
  );
}

<Routes>
  <Route element={<MarketingLayout />}>
    <Route index element={<MarketingHome />} />
    <Route path="contact" element={<Contact />} />
  </Route>
 
  <Route path="projects">
    <Route index element={<ProjectsHome />} />
    <Route element={<ProjectsLayout />}>
      <Route path=":pid" element={<Project />} />
      <Route path=":pid/edit" element={<EditProject />} />
    </Route>
  </Route>
</Routes>

<Routes>
  <Route path="/" element={<Root />}>
    <Route index element={<Home />} />
 
    <Route path="dashboard" element={<Dashboard />}>
      <Route index element={<DashboardHome />} />
      <Route path="settings" element={<Settings />} />
    </Route>
  </Route>
</Routes>

<Route path="projects">
  <Route index element={<ProjectsHome />} />
  <Route element={<ProjectsLayout />}>
    <Route path=":pid" element={<Project />} />
    <Route path=":pid/edit" element={<EditProject />} />
  </Route>
</Route>

<Route path="teams/:teamId" element={<Team />} />;
 
// Team কম্পোনেন্টে:
import { useParams } from "react-router";
export function Team() {
  let { teamId } = useParams();
  // এখন teamId থেকে data fetch করা যাবে
}

<Route path="/c/:categoryId/p/:productId" element={<Product />} />

<Route path=":lang?/categories" element={<Categories />} />
<Route path="users/:userId/edit?" element={<User />} />

<Route path="files/*" element={<File />} />;
 
// File কম্পোনেন্টে:
import { useParams } from "react-router";
let { "*": splat } = useParams();
// splat-এ থাকবে files/ পয়েন্টের পরের অংশ

import { NavLink, Link } from "react-router";
 
function Header() {
  return (
    <nav>
      <NavLink to="/" className={({ isActive }) => (isActive ? "active" : "")}>
        Home
      </NavLink>
      <Link to="/concerts/salt-lake-city">Concerts</Link>
    </nav>
  );
}