React Router同层级URL切换页面不刷新问题排查

你的问题不是路由配置导致的，核心原因出在SortingTable组件的副作用逻辑上。

问题根源 #

SortingTable里的useEffect依赖数组是空的，这意味着它只会在组件首次挂载时执行一次getData()和getColumns()。当你在同层级路由（比如从/table/activity切换到/table/metadata）跳转时，虽然URL里的name参数变了，但组件并没有重新触发数据请求——因为useEffect没有监听name参数的变化，组件只会复用之前的state，所以页面显示旧表格内容。

解决方案 #

修改SortingTable中的useEffect，把路由参数name添加到依赖数组中：

function SortingTable () {
    let [searchParams, setSearchParams] = useSearchParams();
    const [data, setData] = useState([])
    const [columns, setColumns] = useState([])
    const { name } = useParams();

    // 添加name到依赖数组，监听参数变化
    useEffect(() =>{
        getData()
        getColumns()
    }, [name]) 

    const getData = () => {
        getTable(name).then(result => {
            setData(result);
            console.log(result)
        })
    }

    const getColumns = () => {
        getColumnFields(name).then(result => {
            setColumns(result);
        })
    }
    
    // 其余代码不变...
}

这样，每当路由参数name发生变化时，useEffect就会重新执行，调用getData()和getColumns()获取对应表格的新数据和列配置，更新state后页面就能渲染出正确的内容。

额外优化 #

你在Metadata的Link上添加的onClick={reload}完全没用——这个reload函数只是空的console.log()，而且React Router的Link本身就能处理路由跳转，不需要额外的刷新逻辑，建议直接移除：

<Link to="/table/metadata/">
    <button class="button" >
        <span>Metadata</span>
    </button>
</Link>

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