Настройка React Router

npm install react-router-dom

import { BrowserRouter } from 'react-router-dom';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.getElementById('root')!).render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
);

import { Routes, Route } from 'react-router-dom';

function App() {
    return (
        <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/posts" element={<Posts />} />
        </Routes>
    );
}

<Route path="/posts/:id" element={<PostDetail />} />

import { useParams } from 'react-router-dom';

function PostDetail() {
    const { id } = useParams<{ id: string }>();
    return <p>Пост {id}</p>;
}

<Routes>
    <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="posts" element={<Posts />} />
        <Route path="posts/:id" element={<PostDetail />} />
    </Route>
</Routes>

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

function Layout() {
    return (
        <>
            <header>Шапка</header>
            <main>
                <Outlet />
            </main>
            <footer>Подвал</footer>
        </>
    );
}

<Route path="*" element={<NotFound />} />

import { Link } from 'react-router-dom';

<Link to="/about">О нас</Link>
<Link to={`/posts/${post.id}`}>{post.title}</Link>

<NavLink to="/about" className={({ isActive }) => isActive ? 'active' : ''}>
    О нас
</NavLink>

import { useNavigate } from 'react-router-dom';

function Form() {
    const navigate = useNavigate();

    function handleSubmit() {
        // ...
        navigate('/posts');
    }

    function goBack() {
        navigate(-1);
    }
}