В React Router v6 вы можете создавать вложенные маршруты с помощью компонентов Routesи Route. Вот несколько способов настройки вложенных маршрутов с помощью HashRouter:

1. Импортируйте необходимые компоненты из react-router-dom:

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

2. Настройте вложенные маршруты с помощью компонента Routes:

   <Router>
   <Routes>
   <Route path="/" element={<Home />} />
   <Route path="/products" element={<Products />}>
     <Route path="/" element={<AllProducts />} />
     <Route path=":id" element={<Product />} />
   </Route>
   <Route path="/about" element={<About />} />
   </Routes>
   </Router>

В приведенном выше примере маршрут /productsявляется родительским маршрутом, который содержит два вложенных маршрута: /для отображения всех продуктов и /:idдля отображения конкретного товара.

3. Отобразите вложенные маршруты с помощью свойства element:

   function Products() {
   return (
   <div>
     <h2>Products</h2>
     <Outlet /> {/* Renders the nested routes */}
   </div>
   );
   }

Компонент Outletиспользуется для отображения вложенных маршрутов, определенных в компоненте Products.

Выполняя эти шаги, вы можете создавать вложенные маршруты, используя HashRouterв React Router v6.