React点击跳转后URL更新但页面无变化，该如何排查解决？

问题原因 #

你出现URL更新但页面内容不变的问题，核心是路由配置存在多处缺失：

1. 仅配置了/test单一路由，没有为列表点击后跳转的目标路径（比如详情页路径）配置对应渲染组件
2. 已编写的Test.js组件完全没有接入路由配置，跳转至对应路径时无法匹配到渲染内容
3. 列表数据data初始为空，且没有编写接口请求逻辑拉取数据，/test路径下初始渲染内容为空
4. 如果跳转是同路由仅参数变化的场景，没有监听路由参数变化会导致组件不触发重渲染

解决步骤 #

1. 补全App.js的路由配置与数据请求逻辑

修改后的代码如下：

import axios from "axios";
import React, { useEffect, useState } from "react";
import { Routes, Route } from "react-router-dom";
import ListItem from "./components/ListItem";
// 导入Test组件
import Test from "./Test";

function App() {
  const [data, setData] = useState([]);

  // 补全数据请求逻辑
  useEffect(() => {
    // 替换为你的实际接口地址
    axios.get("/你的菜谱接口地址").then(res => {
      setData(res.data)
    })
  }, [])

  return (
    <div className="App">
       <Routes>
         {/* 列表页路由 */}
         <Route
          path="/test"
          element={data.map((list) => (
            <ListItem key={list.id} {...list} />
          ))}
         />
         {/* 详情页路由，:id为动态参数 */}
         <Route path="/test/:id" element={<Test />} />
       </Routes>
    </div>
  );
}

export default App;

2. 校验ListItem组件的跳转逻辑

确保跳转路径和路由配置匹配，示例跳转写法：

// 用Link组件写法
import { Link } from "react-router-dom"
const ListItem = (props) => {
  return <Link to={`/test/${props.id}`}>点击跳转到{props.name}详情</Link>
}

// 用useNavigate写法
import { useNavigate } from "react-router-dom"
const ListItem = (props) => {
  const navigate = useNavigate()
  const goDetail = () => {
    navigate(`/test/${props.id}`)
  }
  return <div onClick={goDetail}>点击跳转到{props.name}详情</div>
}

3. 如需在Test组件获取跳转参数，可使用useParams

import React from "react";
import { useParams } from "react-router-dom";

const Test = () => {
  // 获取路由上的id参数
  const { id } = useParams()
  return (
    <div>
      <p>当前菜谱ID：{id}</p>
    </div>
  );
};

export default Test;

项目参考信息 #

项目源码目录结构

预期跳转效果

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