React页面如何点击导航仅更新指定容器内组件而不刷新整页

1. 移除嵌套的Router组件 #

React Router v5/v6都不允许嵌套<BrowserRouter> / <HashRouter>组件，你全局的App.jsx里已经包裹过一层Router的话，Displayedserventclasscontainer容器内不需要再重复写Router标签，重复嵌套会导致路由匹配逻辑混乱，触发整页跳转且匹配不到对应路由返回空白。
错误示例：

// 容器内错误写法，重复包裹Router
const Displayedserventclasscontainer = () => {
  return (
    <BrowserRouter> {/* 此处为冗余代码，需要删除 */}
      <Switch>
        <Route path="/saber" component={Saberclass} />
      </Switch>
    </BrowserRouter>
  )
}

修改后仅保留Switch和Route即可。

2. 统一路由路径层级 #

你的路由属于局部子路由，需要和全局路由的前缀保持一致，比如全局路由中分配给这个模块的根路径是/servant-class，那你局部的Route和Link的路径都要带上这个前缀：

// Servantclassesnavbar 中的Link写法
<Link to="/servant-class/saber">Saber</Link>
<Link to="/servant-class/archer">Archer</Link>

// 容器内的Route写法
<Switch>
  <Route exact path="/servant-class" component={Introduction} />
  <Route path="/servant-class/saber" component={Saberclass} />
  <Route path="/servant-class/archer" component={Archerclass} />
  <Route path="/servant-class/lancer" component={Lancerclass} />
</Switch>

注意根路径的Introduction路由要加exact精确匹配属性，否则会优先匹配到根路径，导致其他子路由无法正常渲染

3. 确认Link组件来源 #

如果你用styled-components封装了导航链接，要确认导入的是react-router-dom的Link组件，而不是原生a标签或者其他组件库的链接组件：

// 正确导入
import { Link } from 'react-router-dom'
import styled from 'styled-components'

const NavLink = styled(Link)`
  // 你的样式代码
`

如果误用了原生a标签，就会触发默认的整页跳转行为。

4. React Router v6适配方案 #

如果你用的是v6版本的react-router-dom，Switch已经被替换为Routes，且component属性改为element，写法调整为：

import { Routes, Route } from 'react-router-dom'

<Routes>
  <Route path="/servant-class" element={<Introduction />} />
  <Route path="/servant-class/saber" element={<Saberclass />} />
  <Route path="/servant-class/archer" element={<Archerclass />} />
  <Route path="/servant-class/lancer" element={<Lancerclass />} />
</Routes>

v6默认精确匹配路由，不需要加exact属性。

修改完成后点击导航链接就只会在容器内切换内容，全局的Navbar、Sidebar等外层组件不会重新渲染。

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