React中点击按钮URL更新但页面未加载问题求助

AI 小北

2026-8-21

React路由跳转后页面不加载，手动刷新才显示的问题解决

问题根源

你在MenuItem组件里的路由跳转代码写错了——用逗号,拼接match.url和linkUrl，生成了错误格式的路由路径（比如变成/,/shop）。这时候浏览器地址栏虽然会显示这个错误路径，但Switch组件找不到匹配的路由规则，所以对应页面不会加载；手动刷新时可能因为浏览器或服务器的 fallback 配置，意外让错误路径匹配到了正确页面，但这不是正常逻辑，核心问题就是路径拼接错误。

修复步骤

把拼接路径的逗号改成斜杠，或者根据linkUrl的类型直接跳转：

情况1：`linkUrl`是相对路径（比如`shop`）

修改onClick里的跳转代码：

onClick = {() => history.push(`${match.url}/${linkUrl}`)}

情况2：`linkUrl`是绝对路径（比如`/shop`）

直接用linkUrl跳转就行，不用拼接match.url：

onClick = {() => history.push(linkUrl)}

修改后的完整MenuItem代码：

import React from "react";
import {withRouter} from 'react-router-dom';

import './menu-item.styles.scss'

const MenuItem= ({title, imageUrl, size, history, linkUrl , match}) => (
    <div 
        className={`${size} menu-item`} 
        onClick = {() => history.push(`${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 default withRouter(MenuItem);