React点击Link跳转回首页不触发重渲染，需手动刷新才生效

关于a标签替换Link方案的合理性 #

该方案不符合前端开发最佳实践。Link 组件是react-router提供的客户端路由跳转能力，跳转时不会重新加载整个页面，能保留单页应用的流畅体验、也不会丢失应用内的全局状态；而a标签跳转本质是页面整页重载，不仅会损耗加载性能，也会清空当前页面所有React应用的内存状态，完全失去了单页应用的优势。

问题根因 #

你遇到的跳转不触发重渲染问题，核心原因是 Header 组件放在了Router 组件的外部：

• Link 组件必须在 Router 的上下文范围内才能正常触发路由状态更新，放在Router外的Header组件里的Link，无法通知Router内部的Switch去匹配路由更新，才会出现URL变了但路由组件不重渲染的问题。
• 你从/跳到/category1看起来正常，大概率是首次路由匹配时的巧合，反向跳转时路由状态没有被正常订阅更新，所以页面不会重渲染。

正确修复方法 #

把Header组件移到Router组件内部即可，修改后的App组件代码如下：

import './App.css';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
import Header from './components/header/Header';
import Home from './components/home/Home';
import About from './components/about/About';
import Accessories from './components/accessories/Accessories';
import Category1 from './components/accessories/categories/Category1';
import Category2 from './components/accessories/categories/Category2';
import Category3 from './components/accessories/categories/Category3';
import Category4 from './components/accessories/categories/Category4';
import Contact from './components/contact/Contact';
import Footer from './components/footer/Footer';

const App = () => {
    return (
        <div className="App">
            <Router>
                {/* Header移到Router内部，让内部的Link能获取路由上下文 */}
                <Header />
                <Switch>
                    <Route exact path="/">
                        <Home />
                        <About />
                        <Accessories />
                        <Contact />
                    </Route>
                    <Route exact path="/category1">
                        <Category1 />
                    </Route>
                    <Route exact path="/category2">
                        <Category2 />
                    </Route>
                    <Route exact path="/category3">
                        <Category3 />
                    </Route>
                    <Route exact path="/category4">
                        <Category4 />
                    </Route>
                </Switch>
                <Footer />
            </Router>
        </div>
    );
}

export default App;

修复后把a标签换回Link组件即可正常使用客户端路由能力。

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