React Router中使用Link组件跳转时如何实现页面刷新？

架构老林

2026-9-28

问题原因

重复嵌套Router组件：单React应用仅需顶层保留一个Router实例即可，你在Login组件内部额外嵌套了一层Router，导致内部的Link跳转只会触发内层Router的路由匹配，外层App的Switch完全感知不到路径变化，Login组件不会被卸载，所以旧内容会一直保留，仅在内层Router对应的位置渲染Select内容。
Link语法错误：你在Link标签属性中直接写{window.location.reload()}属于语法错误，会在组件渲染时直接触发刷新，完全不符合点击跳转的逻辑，且路由跳转本身不需要手动刷新页面。
冗余代码：App中定义的createBrowserHistory没有实际使用，BrowserRouter默认内置了history实例，无需额外创建。

修复后的代码

App.js

import Login from "./pages/Login";
import Select from "./pages/Select";
import {
    BrowserRouter as Router,
    Switch,
    Route
} from "react-router-dom";

function App() {
    return (
        <div className="fnb">
            <Router>
                <Switch>
                    <Route exact path="/" component={Login} />
                    <Route exact path="/select" component={Select} />
                </Switch>
            </Router>
        </div>
    );
}

export default App;

Login.js

删除内部嵌套的Router、多余的Switch和Route规则，仅保留Link即可：

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

function Login() {
    return (
        <div>
            <p>this is the login</p>
            <Link to="/select">go to select page</Link>
        </div>
    );
}

export default Login;

Select组件代码无需修改。