Marshrutlash

npm install react-router

import { MemoryRouter, Routes, Route } from "react-router";
import { chiz, matn } from "./dom-muhit.mjs";

function Bosh() {
    return <h1 id="sahifa">Bosh sahifa</h1>;
}

function Haqida() {
    return <h1 id="sahifa">Biz haqimizda</h1>;
}

function Topilmadi() {
    return <h1 id="sahifa">404 - topilmadi</h1>;
}

function Ilova({ boshlangichYol }) {
    return (
        <MemoryRouter initialEntries={[boshlangichYol]}>
            <Routes>
                <Route path="/" element={<Bosh />} />
                <Route path="/haqida" element={<Haqida />} />
                <Route path="*" element={<Topilmadi />} />
            </Routes>
        </MemoryRouter>
    );
}

await chiz(<Ilova boshlangichYol="/" />);
console.log(matn("#sahifa"));

await chiz(<Ilova key="2" boshlangichYol="/haqida" />);
console.log(matn("#sahifa"));

await chiz(<Ilova key="3" boshlangichYol="/yoq-bunday" />);
console.log(matn("#sahifa"));

import { MemoryRouter, Routes, Route, Link } from "react-router";
import { chiz, bos, matn } from "./dom-muhit.mjs";

function Sahifa({ nom }) {
    return (
        <div>
            <h1 id="sahifa">{nom}</h1>
            <Link to="/">Bosh</Link>
            <Link to="/haqida">Haqida</Link>
        </div>
    );
}

await chiz(
    <MemoryRouter initialEntries={["/"]}>
        <Routes>
            <Route path="/" element={<Sahifa nom="Bosh sahifa" />} />
            <Route path="/haqida" element={<Sahifa nom="Haqida" />} />
        </Routes>
    </MemoryRouter>,
);

console.log("boshida:", matn("#sahifa"));

const havolalar = [...document.querySelectorAll("a")];
console.log("havola manzillari:",
    havolalar.map((h) => h.getAttribute("href")));

await bos("a[href='/haqida']");
console.log("bosilgandan keyin:", matn("#sahifa"));

import { MemoryRouter, Routes, Route, useParams } from "react-router";
import { chiz, matn } from "./dom-muhit.mjs";

const kitoblar = {
    1: { sarlavha: "O'tkan kunlar", muallif: "Abdulla Qodiriy" },
    2: { sarlavha: "Sarob", muallif: "Abdulla Qahhor" },
};

function Kitob() {
    const { id } = useParams();
    const kitob = kitoblar[id];

    if (!kitob) return <p id="natija">Kitob topilmadi: {id}</p>;
    return <p id="natija">{kitob.sarlavha} - {kitob.muallif}</p>;
}

function Ilova({ yol }) {
    return (
        <MemoryRouter initialEntries={[yol]}>
            <Routes>
                <Route path="/kitoblar/:id" element={<Kitob />} />
            </Routes>
        </MemoryRouter>
    );
}

await chiz(<Ilova yol="/kitoblar/1" />);
console.log(matn("#natija"));

await chiz(<Ilova key="2" yol="/kitoblar/2" />);
console.log(matn("#natija"));

await chiz(<Ilova key="3" yol="/kitoblar/99" />);
console.log(matn("#natija"));

import { MemoryRouter, Routes, Route, Outlet, Link } from "react-router";
import { chiz, matn, html } from "./dom-muhit.mjs";

function Qobiq() {
    return (
        <div>
            <nav id="menyu">
                <Link to="/panel">Bosh</Link>
                <Link to="/panel/hisobot">Hisobot</Link>
            </nav>
            <main id="mazmun">
                <Outlet />
            </main>
        </div>
    );
}

function PanelBoshi() {
    return <p>Panel boshi</p>;
}

function Hisobot() {
    return <p>Hisobot sahifasi</p>;
}

function Ilova({ yol }) {
    return (
        <MemoryRouter initialEntries={[yol]}>
            <Routes>
                <Route path="/panel" element={<Qobiq />}>
                    <Route index element={<PanelBoshi />} />
                    <Route path="hisobot" element={<Hisobot />} />
                </Route>
            </Routes>
        </MemoryRouter>
    );
}

await chiz(<Ilova yol="/panel" />);
console.log("menyu bormi:", document.querySelector("#menyu") !== null);
console.log("mazmun:", matn("#mazmun"));

await chiz(<Ilova key="2" yol="/panel/hisobot" />);
console.log("menyu bormi:", document.querySelector("#menyu") !== null);
console.log("mazmun:", matn("#mazmun"));

import { MemoryRouter, Routes, Route, useNavigate } from "react-router";
import { chiz, bos, matn } from "./dom-muhit.mjs";

function Kirish() {
    const otish = useNavigate();

    function yubor() {
        otish("/profil");
    }

    return (
        <div>
            <h1 id="sahifa">Kirish</h1>
            <button onClick={yubor}>Kirish</button>
        </div>
    );
}

function Profil() {
    const otish = useNavigate();
    return (
        <div>
            <h1 id="sahifa">Profil</h1>
            <button onClick={() => otish(-1)}>Orqaga</button>
        </div>
    );
}

await chiz(
    <MemoryRouter initialEntries={["/"]}>
        <Routes>
            <Route path="/" element={<Kirish />} />
            <Route path="/profil" element={<Profil />} />
        </Routes>
    </MemoryRouter>,
);

console.log(matn("#sahifa"));

await bos("button");
console.log("kirgandan keyin:", matn("#sahifa"));

await bos("button");
console.log("orqaga bosgandan keyin:", matn("#sahifa"));

import { MemoryRouter, Routes, Route, useSearchParams } from "react-router";
import { chiz, bos, matn } from "./dom-muhit.mjs";

function Qidiruv() {
    const [parametrlar, ozgartir] = useSearchParams();

    const so = parametrlar.get("so") ?? "";
    const sahifa = Number(parametrlar.get("sahifa") ?? 1);

    return (
        <div>
            <p id="holat">so: "{so}", sahifa: {sahifa}</p>
            <button onClick={() => ozgartir({ so: "react", sahifa: "2" })}>
                Qidirish
            </button>
        </div>
    );
}

await chiz(
    <MemoryRouter initialEntries={["/?so=node&sahifa=3"]}>
        <Routes>
            <Route path="/" element={<Qidiruv />} />
        </Routes>
    </MemoryRouter>,
);

console.log(matn("#holat"));

await bos("button");
console.log(matn("#holat"));

import { MemoryRouter, Routes, Route, Navigate } from "react-router";
import { chiz, matn } from "./dom-muhit.mjs";

function Himoya({ kirgan, children }) {
    if (!kirgan) return <Navigate to="/kirish" replace />;
    return children;
}

function Ilova({ kirgan }) {
    return (
        <MemoryRouter initialEntries={["/profil"]}>
            <Routes>
                <Route path="/kirish" element={<h1 id="sahifa">Kirish</h1>} />
                <Route
                    path="/profil"
                    element={
                        <Himoya kirgan={kirgan}>
                            <h1 id="sahifa">Profil</h1>
                        </Himoya>
                    }
                />
            </Routes>
        </MemoryRouter>
    );
}

await chiz(<Ilova kirgan={false} />);
console.log("kirmagan:", matn("#sahifa"));

await chiz(<Ilova key="2" kirgan={true} />);
console.log("kirgan:", matn("#sahifa"));