React Router路由异常：URI更新页面不切换，刷新才生效求助

你的核心问题是React Router v6 不再支持自定义 history 实例与 BrowserRouter 绑定，同时你在导航时直接操作独立的history对象，没有通过React Router的上下文触发路由组件的重新渲染，导致URI变化但页面内容不更新，只有刷新时才重新匹配路由。

具体问题点：

• React Router v6 已移除BrowserRouter的history属性，传入自定义history实例不会被路由上下文识别
• 使用history.push()直接修改浏览器历史栈，但没有通知React Router的路由状态更新，useRoutes无法感知路径变化，因此不会渲染对应页面

1. 移除自定义history依赖 #

首先删除自定义的BrowserHistory.js文件，同时修改index.js，移除history相关代码：

// index.js
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
);

2. 替换history.push为React Router v6的导航方式 #

因为你的Navbar是类组件，React Router v6不再提供withRouter高阶组件，所以有两种可选方案：

方案A：将Navbar转为函数组件，使用useNavigate钩子

修改Navbar.js为函数组件，用useNavigate替代history.push：

// Navbar.js
import { useNavigate } from 'react-router-dom';
import { useState } from 'react';
...

const Navbar = (props) => {
    const [activeItem, setActiveItem] = useState('');
    const [width, setWidth] = useState(window.innerWidth);
    const [visible, setVisible] = useState(false);
    const navigate = useNavigate();

    const handleItemClick = (e, { name }) => {
        setActiveItem(name);

        switch (name) {
            case APP_CONST.home:  
                navigate(PATH.home);
                break;
            case APP_CONST.defect:
                navigate(PATH.defect);
                break;
            case APP_CONST.other:
                navigate(PATH.other);
                break;
            default:
                navigate(PATH.home);
                break;
        }
    };

    // 补充原类组件中的handleToggle、handlePusher等方法，转为函数形式
    const handleToggle = () => setVisible(!visible);
    const handlePusher = () => setVisible(false);

    return (
        <Fragment>
            {
                width <= NUMBER.mobileScreenSize ?
                    <MobileNav
                        onToggle={handleToggle}
                        visible={visible}
                        onPusherClick={handlePusher}
                        item={activeItem}
                        handleItemClick={handleItemClick}
                    >
                        <NavBarChildren>{props.children}</NavBarChildren>
                    </MobileNav> :
                    <DesktopNav item={activeItem} handleItemClick={handleItemClick}>
                        <NavBarChildren>{props.children}</NavBarChildren>
                    </DesktopNav>
            }
        </Fragment>
    );
};

方案B：在MenuItems中使用React Router的Link组件

如果不想修改类组件结构，可以直接在MenuItems组件中用Link替代手动点击事件，利用React Router的内置导航：

// MenuItems.js（假设你的MenuItems是单独组件）
import { Link } from 'react-router-dom';

export const MenuItems = ({ item }) => {
    return (
        <>
            <Menu.Item
                name={APP_CONST.home}
                active={item === APP_CONST.home}
                as={Link}
                to={PATH.home}
            >
                首页
            </Menu.Item>
            <Menu.Item
                name={APP_CONST.defect}
                active={item === APP_CONST.defect}
                as={Link}
                to={PATH.defect}
            >
                缺陷管理
            </Menu.Item>
            <Menu.Item
                name={APP_CONST.other}
                active={item === APP_CONST.other}
                as={Link}
                to={PATH.other}
            >
                其他页面
            </Menu.Item>
        </>
    );
};

同时删除Navbar.js中的handleItemClick里的history.push逻辑，只保留状态更新即可：

handleItemClick = (e, { name }) => {
    this.setState({ activeItem: name });
}

3. 验证路由配置 #

确保你的PATH常量是正确的路径字符串，比如PATH.home = '/'，PATH.defect = '/defect'等，useRoutes会正确匹配这些路径。

React Router v6 完全重构了路由系统，不再依赖外部history库，而是通过内部的路由上下文管理状态。所有导航操作必须通过useNavigate钩子、Link组件或Navigate组件触发，才能保证路由组件同步更新。

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