在另一个组件中重用BrowserRouter路由

Question

我的 header.js 文件中有 BrowserRouter：

<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>

我正在尝试重用我的 footer.js 中的链接

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

有办法吗？

我在页脚 js 文件中尝试了相同的标签，但出现了下一个错误：

无法解构“react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)”的属性“basename”，因为它为空。

我猜这是因为它无法访问我的 header.js 中的路由。

Answer 1

您遇到的错误是由于 BrowserRouter 通常应该包裹整个应用程序，而不仅仅是 header.js 等特定组件。当您尝试在 BrowserRouter 上下文之外使用 Link 组件时，它会导致类似于您所看到的问题。

要解决此问题，您应该将 BrowserRouter 移至组件层次结构中的更高级别，通常位于主 App.js 或根组件中。 ` 从 'react-router-dom' 导入 { BrowserRouter };

函数应用程序（）{ 返回 （ 传递数据 ）； }`