Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Reusing the BrowserRouter Route in another component

I have BrowserRouter in my header.js file:

<BrowserRouter>
            <header className='tren dark:bg-blend-multiply h-[25vh] grid grid-cols-12 shadow-xl '>
                <div className='flex items-center justify-center col-span-full md:justify-end md:pr-10'>
                    <div className='flex flex-row justify-between w-full px-4 md:block md:w-fit'>
                        <h1 className='text-center text-white underline decoration-wavy decoration-2 '>
                            Dit Gestion
                        </h1>
                        <label className="inline-flex items-center justify-end cursor-pointer md:w-full">
                            <input onChange={() => darkModeHandler()} type="checkbox" checked={isDark ? 'checked' : ''} className="switch__input" id="Switch" />
                            <label className="switch__label" htmlFor="Switch">
                                <span className="switch__indicator"></span>
                                <span className="switch__decoration"></span>
                            </label>
                        </label>
                    </div>
                </div>
                <Link className="actual" to="contacto">
                    Contacto
                </Link>
            </header>
            <Routes>
                <Route index element={<Idas />}></Route>
                <Route path='vueltas' element={<Vueltas />}></Route>
                <Route path='idas' element={<Vueltas />}></Route>
                <Route path='contacto' element={<Contacto />}></Route>
                <Route path='reserva' element={<Reserva />}></Route>
                <Route path='datos' element={<DatosFinal />}></Route>
            </Routes>
        </BrowserRouter>

and i’m trying to reuse the link in my footer.js

<Link className="actual" to="contacto">
  Contacto
</Link>

Is there a way to do so?

i tried the same tag in the footer js file but i’m getting the next error:

Cannot destructure property ‘basename’ of ‘react__WEBPACK_IMPORTED_MODULE_0__.useContext(…)’ as it is null.

I’m guessing it’s because it can’t access the Routes inside my header.js.

Tags:

2

Answers


  1. 0

    The error you’re encountering is due to the fact that BrowserRouter should generally be wrapped around the entire application, not just specific components like header.js. When you try to use the Link component outside of the BrowserRouter context, it causes issues like the one you’re seeing.

    To solve this problem, you should move the BrowserRouter to a higher level in your component hierarchy, typically in your main App.js or the root component.
    `
    import { BrowserRouter } from ‘react-router-dom’;

    function App() {
    return (

    pass data

    );
    }`

    Login or Signup to reply.
  2. 0

    wrap your entire application in BrowserRouter at the top level, usually in App.js. This way, all components can use routing and Link without encountering issues.

     ``import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Header from './Header';
import Footer from './Footer';

function App() {
  return (
    <BrowserRouter>
      <Header />
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='contacto' element={<Contacto />} />
        {/* Other routes */}
      </Routes>
      <Footer />
    </BrowserRouter>
  );
}

export default App;
``
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search