Ошибки в react-router?

Question

[Danila232]

Код работал, но потом я добавил роутинг(NavLinks в Header и BrowserRouter в App) - и всё сломалось. Куча ошибок, не пойму из-за чего. Они и про useContext() (хотя я нигде не юзал контекст) и про NavLinks(с ними вроде нормально всё), так что по описанию ошибок в консоли не могу понять в чём дело, подскажите пожалуйста

//Header(всё сломалось после добавления NavLinks, хотя они импортнуты)
import { NavLink, useSearchParams } from "react-router-dom"
<nav className="header__nav">
       <ul className="header__nav-list">
                <li className="header__nav-li"><NavLink to="/">Home</NavLink></li>
                <li className="header__nav-li"><NavLink to="/all-cards">Cards</NavLink></li>
                <li className="header__nav-li"><NavLink to="/more">More</NavLink></li>
        </ul>
 </nav>

// App
import {
    BrowserRouter,
    Route,
    Routes,
  } from "react-router-dom";
 return (
        <div className="wrapper">

            <Header />

                {/* <RouterProvider router={router} /> */}

                <BrowserRouter>
                    <Routes>
                        <Route path="/" element={<Main />} />
                        <Route path="/all-cards" element={<Cards />} />
                        <Route path="/more" element={<More />} />
                    </Routes>
                </BrowserRouter>

            <Footer />

        </div>
    )

Я прикрепил не весь код из этих 2х компонентов, но т.к всё работало ровно до момента как я добавил кусочек с BrowserRouter в App и Navlinks в Header - прикрепил только их

Comments

[szQocks]

у тебя твои NavLink находятся за пределами роута

[Danila232]

Да, понял, исправил уже. Но я вообще хочу новый синтаксис использовать, во что мне тогда тут оборачивать все роуты, чтобы NavLink работал?

import { RouterProvider, createBrowserRouter, createRoutesFromElements, Route } from 'react-router-dom';
    const router = createBrowserRouter(
        createRoutesFromElements(

            <Route 
                path="/" 
                element={<Main filterCardsText={filterCardsText} isTitlePending={isTitlePending} />} 
            >

                <Route 
                    path="more" 
                    element={<More />} 
                /> 
                <Route 
                    path="all-cards" 
                    element={<Cards />} 
                /> 

            </Route> 

                
        )
      )


    return (
        <div className="wrapper">


            <Header setFilterCardsText={setFilterCardsText} startTitleTransition={startTitleTransition} />


                <RouterProvider router={router} />


            <Footer />

        </div>

    )

[szQocks]

Danila232, твой хедер должен быть в одном из роутов

советую сделать layout для всего приложения если нужно

App

const Router = createBrowserRouter(
  createRoutesFromElements(
    <Fragment>
      <Route path="/"  element={<Layout />} >
        <Route index element={<HomePage />} />
      </Route>
      <Route path='*' element={<NotFoundPage />} />
    </Fragment>
  )
);

const App = () => {
  return <RouterProvider router={Router} />;
};

Layout

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

const Layout = () => {
  return (
    <div className="layout">
    <Header />
    <Outlet />
    </div>
  )
};
  
export default Layout;

Answer 1

[Kentavr16]

Просто оберни все приложение в роутер. Ты не используешь контекст, а навлинк использует.

Comments

[Danila232]

о, не знал, интересно
А если я использую новый роутинг, во что мне оборачивать?

import { RouterProvider, createBrowserRouter, createRoutesFromElements, Route } from 'react-router-dom';
    const router = createBrowserRouter(
        createRoutesFromElements(

            <Route 
                path="/" 
                element={<Main filterCardsText={filterCardsText} isTitlePending={isTitlePending} />} 
            >

                <Route 
                    path="more" 
                    element={<More />} 
                /> 
                <Route 
                    path="all-cards" 
                    element={<Cards />} 
                /> 

            </Route> 

                
        )
      )


    return (
        <div className="wrapper">


            <Header setFilterCardsText={setFilterCardsText} startTitleTransition={startTitleTransition} />


                <RouterProvider router={router} />


            <Footer />

        </div>

    )

[szQocks]

Danila232, ни во что, вот твоя обёртка <RouterProvider router={router} />

[Kentavr16]

чтобы не было просблем, открываешь свой index.js и там просто оборачиваешь рут-компонент в роутер/или если используешь RouterProvider просто передаешь его в корневой элемент.
Ты постоянно пытаешься всунуть его внутрь jsx:

<div className="wrapper">
            <Header setFilterCardsText={setFilterCardsText} startTitleTransition={startTitleTransition} />
                <RouterProvider router={router} />
            <Footer />
        </div>

Не надо. Если хочешь получить темплейт, лучше посмотри как применяется outlet.