react-router-dom嵌套路由配置：点击Link跳转失效该如何解决？

• 重复声明Router组件：整个React应用全局只需要在最顶层包裹1次Router即可，你在Home组件内部额外声明的Router会创建独立的路由上下文，Header中的Link组件绑定的是内部Router的实例，和顶层路由上下文不同步，因此点击时只会修改内部Router的路径，不会触发顶层路由的视图更新。手动输入地址能正常访问是因为浏览器强制刷新页面，两个路由实例都匹配到了对应路径，所以能渲染出预期组件。
• 注意事项：顶层匹配根路径/的路由不要加exact属性，否则/games之类的子路由路径无法匹配到父级Home组件，会导致头部无法渲染。

删除Home组件中多余的<Router>包裹即可，修正后的Home组件代码如下：

<Container>
    <Header>
        <Link to="/games">Games</Link>
        <Link to="/">Home</Link>
        <SearchBar/>
        <AuthLinks/>
    </Header>
    <Switch>
        <Route  path="/games">
            <Games/>
        </Route>
        <Route  path="/">
            <Main />
        </Route>
    </Switch>
</Container>

你当前的顶层路由配置无需调整，无头部路由放在根路径路由前的写法符合Switch的优先级匹配规则，能正常实现部分页面不带头部的需求。

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