React Router Dom v6：修复仅在非根路径下渲染Nav组件的实现问题

你的代码问题出在**matchPath的使用方式**上：你在Router组件外部调用了matchPath，并且第二个参数硬编码成了"/"，这就导致不管用户实际访问的路由是什么，match永远都是匹配根路径的结果，所以Nav组件永远不会被渲染。

下面给你两种可行的修复方案，你可以根据自己的需求选择：

方案一：使用useLocation钩子判断当前路径 #

这个方法直接获取当前路由路径，判断是否为根路径来决定是否渲染Nav，适合简单场景：

import { BrowserRouter as Router, Routes, Route, useLocation } from "react-router-dom";
import Nav from "./components/Nav/Nav";
import Home from "./components/Home/Home";
import Contributors from "./components/Contributors/Contributors";

const App = () => {
  return (
    <Router>
      <Content />
    </Router>
  );
}

// 注意：useLocation必须在Router内部的组件中使用，所以我们把逻辑放到内部组件里
const Content = () => {
  const location = useLocation();
  // 当路径不是根路径时显示Nav
  const shouldShowNav = location.pathname !== "/";

  return (
    <>
      {shouldShowNav && <Nav />}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/contributors" element={<Contributors />} />
      </Routes>
    </>
  );
}

export default App;

方案二：使用布局路由（推荐，符合React Router v6最佳实践） #

这种方式利用React Router v6的嵌套路由特性，创建一个带Nav的布局组件，让需要显示Nav的路由嵌套在这个布局下，根路由单独配置，扩展性更强：

import { BrowserRouter as Router, Routes, Route, Outlet } from "react-router-dom";
import Nav from "./components/Nav/Nav";
import Home from "./components/Home/Home";
import Contributors from "./components/Contributors/Contributors";

// 创建带Nav的布局组件，Outlet用来渲染子路由的内容
const WithNavLayout = () => {
  return (
    <>
      <Nav />
      <Outlet />
    </>
  );
}

const App = () => {
  return (
    <Router>
      <Routes>
        {/* 根路由不需要Nav，直接渲染Home */}
        <Route path="/" element={<Home />} />
        {/* 所有需要Nav的路由都嵌套在这个布局下 */}
        <Route element={<WithNavLayout />}>
          <Route path="/contributors" element={<Contributors />} />
          {/* 以后新增需要Nav的路由，直接在这里添加即可 */}
        </Route>
      </Routes>
    </Router>
  );
}

export default App;

两种方案都能解决你的问题，方案二更适合后续路由的扩展维护，推荐使用。

内容的提问来源于stack exchange，提问作者Davy Kamanzi