Remix JS中useLocation使用报错：无法读取undefined的pathname属性

错误原因 #

TypeError: Cannot read properties of undefined (reading 'pathname') 是因为useLocation()返回了undefined，说明你的Sidenav组件不在Remix的路由上下文（Router Context）范围内，或者渲染时上下文尚未完成初始化。

解决方案 #

1. 给location添加空值保护 #

直接修改Sidenav组件代码，在解构和使用pathname前做空值校验，同时修复未声明变量的问题：

import { Link, NavLink, useLocation } from "@remix-run/react";

function Sidenav(props) {
  const location = useLocation();
  // 用可选链和默认值避免undefined报错
  const pathname = location?.pathname || '/';
  console.log(pathname);
  // 声明局部变量，避免污染全局作用域
  const collapseName = pathname.split("/").slice(1)[0] || '';
  
  return (<></>)
}

2. 确认组件在Remix路由上下文内 #

检查以下两点：

• 确保Layout组件只在Remix的路由组件（如root.jsx、页面路由组件）中渲染，没有在路由系统外部（比如独立脚本、非路由组件）使用Sidenav。
• 验证MaterialUIControllerProvider是否干扰了上下文传递：暂时移除该Provider，若错误消失，调整包裹顺序让Remix路由上下文优先覆盖：

// root.jsx 调整包裹顺序
export default function App() {
  return (
    <Document>
      <Layout>
        <MaterialUIControllerProvider>
          <Outlet />
        </MaterialUIControllerProvider>
      </Layout>
    </Document>
  );
}

3. 用useMatches替代useLocation（可选） #

如果useLocation仍然有问题，可以改用Remix的useMatches钩子获取路由信息，这在处理面包屑场景时更灵活：

import { useMatches } from "@remix-run/react";

function Sidenav(props) {
  const matches = useMatches();
  // 获取最后一个匹配路由的pathname
  const pathname = matches[matches.length - 1]?.pathname || '/';
  const collapseName = pathname.split("/").slice(1)[0] || '';
  
  return (<></>)
}

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