未捕获的 TypeError：无法解构 'React2.useContext(...)' 的属性 'basename'，因为它为 null
回答 2
浏览 3.5万
2023-03-14
我面对未捕获的 TypeError：Cannot destructure property 'basename' of 'React2.useContext(...)' as it is null。在代码的链接组件中
import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { styles } from '../styles';
import { navLinks } from '../constansts';
import { logo, menu, close } from '../assets';
const Navbar = () => {
const [active, setActive] = useState('');
return (
<nav className={`${styles.paddingX} w-full flex items-center py-5 fixed top-0 z-20 bg-primary`}>
<div className="w-full flex justify-between items-center max-w-7x1 max-auto">
<Link
to="/"
className="flex items-center gap-2"
onClick={() => {
setActive('');
window.scrollTo(0, 0);
}}
>
<img alt="logo" />
</Link>
</div>
</nav>
);
};
export default Navbar;
我不知道如何解决这个问题，谁能告诉我如何解决这个问题呢？
你是在哪里使用useContext()勾子的？
- MagnusEffect 2023-03-14
把这个导航组件移到
<BrowserRouter>内，在<Routes>标签之前。我只是还没有找到链接组件必须在BrowserRouter内的原因，也许这是唯一能让React处理页面导航和一次切换的方法。
- Junior Mayhé 2023-03-14
2 个回答
#1楼
已采纳
得票数 43
你使用了react-router-dom中的Link，但你的应用没有被BrowserRouter包裹。你的index.js：
import { BrowserRouter } from 'react-router-dom'
render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
)
这方面的解释是什么呢？
- Junior Mayhé 2023-03-14
@JuniorMayhé这是因为react-router-dom
Link的实现正在调用useContext，而它正在寻找的上下文是由BrowserRouter提供的。
- Arthur 2023-03-15
#2楼
得票数 1
请确保在App.js上正确使用路由，并将导航条组件放在BrowserRouter内。作为一个例子，我们假设你的app.js看起来类似于：
function App() {
return (
<div className="App">
<Router>
<Routes>
<Route path="/" element={<HomePage/>}/>
<Route path="/x" element={<x/>}/>
<Route path="/y" element={<y/>}/>
<Route path="/z" element={<z/>}/>
<Route path="/*" element={<NotFound/>}/>
</Routes>
</Router>
</div>);
}
export default App;
那就这样吧：
function App() {
return (
<div className="App">
<Router>
<Routes>
<NavBar/>
<Route path="/" element={<HomePage/>}/>
<Route path="/x" element={<x/>}/>
<Route path="/y" element={<y/>}/>
<Route path="/z" element={<z/>}/>
<Route path="/*" element={<NotFound/>}/>
</Routes>
</Router>
</div>);
}
export default App;
请务必同时添加进口!
编辑：在包装路由之前，我把BrowserRouter导入为Router，因为这有助于我理解代码，这就是为什么它被这样声明的原因。