React路由报错：Uncaught TypeError: 无法读取undefined的属性'url'

核心问题 #

你遇到的Uncaught TypeError: Cannot read properties of undefined (reading 'url')错误，本质是两个问题导致：

1. 未启用高阶组件：你写了withRouter高阶组件，但默认导出的是原始MenuItem组件，导致组件根本没拿到match和navigate参数，二者都是undefined。
2. useMatch调用错误：React Router v6中useMatch必须传入路径模式参数（比如useMatch('/*')），无参调用会直接返回undefined。

修复代码 #

方案1：修正高阶组件用法 #

调整useMatch调用方式，同时确保导出被包裹后的组件：

import { useNavigate, useMatch } from 'react-router-dom';

const MenuItem = ({ title, imageUrl, size, navigate, linkUrl, match}) => 
(
    <div 
        className={`${size} menu-item`}
        onClick={() => navigate(`${match.url}${linkUrl}`)}
    >
        <div className='background-image'
            style={{backgroundImage: `url(${imageUrl})`}}
        />
        <div className='content'>
            <h1 className='title'>{title.toUpperCase()}</h1>
            <span className='subtitle'>SHOP NOW</span>
        </div>
    </div>
);

export function withRouter(Component) {
    return (props) => {
        const navigate = useNavigate();
        // 传入匹配所有路径的模式，获取当前路由的match对象
        const match = useMatch('/*');
        return <Component navigate={navigate} match={match} {...props} />;
    }
}

// 关键：导出被withRouter包裹后的组件，而非原始组件
export default withRouter(MenuItem);

方案2：简化写法（无需高阶组件） #

React Router v6推荐直接在组件内使用钩子，无需自定义withRouter：

import { useNavigate, useMatch } from 'react-router-dom';

// 直接在组件内调用钩子，无需通过props传递
const MenuItem = ({ title, imageUrl, size, linkUrl}) => {
    const navigate = useNavigate();
    const match = useMatch('/*');
    
    // 增加容错判断，避免match仍为undefined时报错
    const handleClick = () => {
        if (match) {
            navigate(`${match.url}${linkUrl}`);
        }
    };

    return (
        <div 
            className={`${size} menu-item`}
            onClick={handleClick}
        >
            <div className='background-image'
                style={{backgroundImage: `url(${imageUrl})`}}
            />
            <div className='content'>
                <h1 className='title'>{title.toUpperCase()}</h1>
                <span className='subtitle'>SHOP NOW</span>
            </div>
        </div>
    );
};

export default MenuItem;

额外建议 #

• 用可选链操作符增加容错：比如match?.url替代match.url，即使match为undefined也不会报错：

  onClick={() => navigate(`${match?.url || ''}${linkUrl}`)}
  

• 如果你的路由有更具体的匹配规则，把useMatch('/*')换成对应路径（比如useMatch('/shop/*')），能更精准获取路由信息。

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