Как преобразовать следующий код React Router Dom версии 6.9.0 в V6.26.2?

Question

[Mark]

Я хочу преобразовать следующий код в react-router-dom версию 6.26.2. Сейчас в консоль выезжает ошибка: "Uncaught Error: [div] is not a Route component. All component children of Routes must be a Route or React.Fragment".

Код:

import { React } from "react";
import { Routes, Route } from "react-router-dom";
import { Cart } from "./components/cart/Cart";
import { Catalog } from "./components/catalog/Catalog";
import { About } from "./pages/About";
import { MainPage } from "./components/mainPage/MainPage";
import { Page404 } from "./pages/Page404";
import { ProductPage } from "./components/productPage/ProductPage";
import { Menu } from "./components/menu/Menu";
import { Contacts } from "./pages/Contacts";
import { Footer } from "./UI/Footer";
import { Banner } from "./UI/Banner.jsx";
import { useDispatch } from "react-redux";
import { resetClicks } from "./app/store/searchBarSlice";

function App() {
    const dispatch = useDispatch();

    const hideMenuSearchBar = () => {
        dispatch(resetClicks());
    };

    return (
        <Routes basename="/test">
            <div className="App">
                <Menu />
                <main className="container" onClick={hideMenuSearchBar}>
                    <div className="row">
                        <div className="col">
                            <Banner />
                            <Routes>
                                <Route
                                    path="/"
                                    exact
                                    element={<MainPage />}
                                ></Route>

                                <Route
                                    path="/about"
                                    element={<About />}
                                ></Route>
                                <Route
                                    path="/products/:prdId"
                                    element={<ProductPage />}
                                ></Route>
                                <Route path="/cart" element={<Cart />}></Route>
                                <Route
                                    path="/contacts"
                                    element={<Contacts />}
                                ></Route>
                                <Route path="*" element={<Page404 />}></Route>
                                <Route
                                    path="/:catId"
                                    element={<MainPage />}
                                ></Route>
                                <Route
                                    path="/catalog/:catId?"
                                    element={<Catalog isCatalogPage={true} />}
                                ></Route>
                            </Routes>
                        </div>
                    </div>
                </main>

                <Footer />
            </div>
        </Routes>
    );
}

export default App;

Comments

[Алексей Уколов]

All component children of Routes must be a Route or React.Fragment.

Что конкретно вам непонятно в этом предложении?

[Mark]

Алексей Уколов, То есть, нужно просто заменить div на Route или React.Fragment? так Route className="App" ?

Answer 1

[Данила]

import { React } from "react";
import { Routes, Route } from "react-router-dom";
import { Cart } from "./components/cart/Cart";
import { Catalog } from "./components/catalog/Catalog";
import { About } from "./pages/About";
import { MainPage } from "./components/mainPage/MainPage";
import { Page404 } from "./pages/Page404";
import { ProductPage } from "./components/productPage/ProductPage";
import { Menu } from "./components/menu/Menu";
import { Contacts } from "./pages/Contacts";
import { Footer } from "./UI/Footer";
import { Banner } from "./UI/Banner.jsx";
import { useDispatch } from "react-redux";
import { resetClicks } from "./app/store/searchBarSlice";

function App() {
    const dispatch = useDispatch();

    const hideMenuSearchBar = () => {
        dispatch(resetClicks());
    };

    return (
        <div className="App">
            <Menu />
            <main className="container" onClick={hideMenuSearchBar}>
                <div className="row">
                    <div className="col">
                        <Banner />
                        <Routes basename="/test">
                            <Route path="/" exact element={<MainPage />} />
                            <Route path="/about" element={<About />} />
                            <Route path="/products/:prdId" element={<ProductPage />} />
                            <Route path="/cart" element={<Cart />} />
                            <Route path="/contacts" element={<Contacts />} />
                            <Route path="*" element={<Page404 />} />
                            <Route path="/:catId" element={<MainPage />} />
                            <Route path="/catalog/:catId?" element={<Catalog isCatalogPage={true} />} />
                        </Routes>
                    </div>
                </div>
            </main>
            <Footer />
        </div>
    );
}

export default App;

Comments

[Mark]

Спасибо!! Но появились новые ошибки:
1) Error: useNavigate() may be used only in the context of a Router component.
2) Error: useRoutes() may be used only in the context of a Router component.
3) TypeError: Cannot destructure property 'future' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)' as it is null.

[Данила]

Mark, упс...

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Cart } from "./components/cart/Cart";
import { Catalog } from "./components/catalog/Catalog";
import { About } from "./pages/About";
import { MainPage } from "./components/mainPage/MainPage";
import { Page404 } from "./pages/Page404";
import { ProductPage } from "./components/productPage/ProductPage";
import { Menu } from "./components/menu/Menu";
import { Contacts } from "./pages/Contacts";
import { Footer } from "./UI/Footer";
import { Banner } from "./UI/Banner.jsx";
import { useDispatch } from "react-redux";
import { resetClicks } from "./app/store/searchBarSlice";

function App() {
    const dispatch = useDispatch();

    const hideMenuSearchBar = () => {
        dispatch(resetClicks());
    };

    return (
        <BrowserRouter basename="/test">
            <div className="App">
                <Menu />
                <main className="container" onClick={hideMenuSearchBar}>
                    <div className="row">
                        <div className="col">
                            <Banner />
                            <Routes>
                                <Route path="/" exact element={<MainPage />} />
                                <Route path="/about" element={<About />} />
                                <Route path="/products/:prdId" element={<ProductPage />} />
                                <Route path="/cart" element={<Cart />} />
                                <Route path="/contacts" element={<Contacts />} />
                                <Route path="*" element={<Page404 />} />
                                <Route path="/:catId" element={<MainPage />} />
                                <Route path="/catalog/:catId?" element={<Catalog isCatalogPage={true} />} />
                            </Routes>
                        </div>
                    </div>
                </main>
                <Footer />
            </div>
        </BrowserRouter>
    );
}

export default App;

[Mark]

Данила, Все сработало, спасибо большое!!

[Александр]

Посмотрите внимательно на Outlet, сможете ещё весь layout в отдельный компонент вынести.