如何修复React应用中使用react-router的useLocation钩子出现的报错

1. 上下文缺失报错修复 #

如果报错为useLocation() may be used only in the context of a Router component，是因为使用useLocation的组件没有被React Router的路由组件包裹，修复方法：

• 确保你的根组件（通常是App.jsx）外层已经包裹了<BrowserRouter>（或者<HashRouter>）
• 确保ProductList组件对应的路由规则是写在Router组件内部，示例路由配置：

// App.jsx 示例
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import ProductList from './pages/ProductList'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* 路由path必须对应你的路径规则，这里用:cat匹配路径参数 */}
        <Route path="/products/:cat" element={<ProductList />} />
      </Routes>
    </BrowserRouter>
  )
}

2. JSX语法错误修复 #

你当前代码的return部分存在严重的JSX语法错误：

• 没有根节点包裹内容
• 标签没有正确闭合，Option元素完全缺失
  修复后的return部分代码如下：

return (
  <Container>
    <Navbar />
    <Announcement />
    <Title>{cat}</Title>
    <FilterContainer>
      <Filter>
        <FilterText>Filter Products:</FilterText>
        <Select name="color" onChange={handleFilters}>
          <Option value="">Color</Option>
          <Option value="white">white</Option>
          <Option value="black">black</Option>
          <Option value="red">red</Option>
          <Option value="blue">blue</Option>
          <Option value="yellow">yellow</Option>
          <Option value="green">green</Option>
        </Select>
        <Select name="size" onChange={handleFilters}>
          <Option value="">Size</Option>
          <Option value="XS">XS</Option>
          <Option value="S">S</Option>
          <Option value="M">M</Option>
          <Option value="L">L</Option>
          <Option value="XL">XL</Option>
        </Select>
      </Filter>
      <Filter>
        <FilterText>Sort Products:</FilterText>
        <Select onChange={(e) => setSort(e.target.value)}>
          <Option value="newest">Newest</Option>
          <Option value="asc">Price (asc)</Option>
          <Option value="desc">Price (desc)</Option>
        </Select>
      </Filter>
    </FilterContainer>
    <Products category={cat} filters={filters} sort={sort}/>
    <Newsletter />
    <Footer />
  </Container>
);

3. 路径参数获取优化 #

你现在手动拆分路径的方式容错率很低，路径层级变化就会获取到undefined，推荐用React Router提供的useParams钩子直接获取路径参数，修改方法：

• 导入useParams：import { useParams } from "react-router-dom"
• 替换原来的参数获取代码：

// 删掉下面两行
// const location = useLocation();
// const cat = location.pathname.split("/")[2];
// 替换为
const { cat } = useParams();

4. 导入路径错误修复 #

如果是React浏览器项目，所有路由相关的hooks都应该从react-router-dom导入，而非react-router，如果项目没有安装依赖先执行安装命令：
npm install react-router-dom
然后把导入语句修改为：
import { useParams } from "react-router-dom";

内容的提问来源于stack exchange，提问作者Gregg m