React Router <Link>跳转URL变更但组件未自动渲染问题排查

数据老陈

2026-8-27

问题现象

使用React Router实现导航栏路由切换时，点击「Upload」跳转按钮后地址栏URL可正常变更为/upload，但视图不会自动更新为UploadPage组件，原有页面保持显示，必须手动刷新页面才能加载目标路由对应的组件。

故障原因

出问题的核心是App.js中/video/:videoId对应的路由配置错误：

React Router v5的Route组件支持component、render、children三种渲染方式，单个路由只能选择其中一种使用，同时传入component和render属性会破坏路由上下文的更新监听逻辑，导致路由切换时无法触发匹配组件的重渲染。
该路由本身目标就是渲染Home组件，同时写两个渲染属性属于冗余错误配置。

修复方法

删除/video/:videoId路由上多余的渲染属性即可，两种写法二选一：

用render写法就删掉component={Home}
用component写法就删掉整行render属性（React Router会自动将路由参数注入到组件props中，不需要手动透传）

修正后的App.js代码如下：

import { Component } from "react";
import Home from "../src/components/Component/Home/Home";
import Header from "./components/Component/Header/Header";
import UploadPage from "./components/Component/VideoUpload/VideoUpload";
import { BrowserRouter, Switch, Route } from "react-router-dom";

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Header />
        <Switch>    
          <Route path="/" exact component={Home} />
          <Route
            path="/video/:videoId"
            render={(routerProps) => <Home {...routerProps} />
          />
          <Route path="/upload" component={UploadPage} />
        </Switch>
      </BrowserRouter>
    );
  }
}

export default App;