如何借助React Router获取当前路由并按需渲染内容？

针对你提出的几个问题，直接给出实用解决方案：

1. 更优的路由匹配与内容渲染方式 #

你当前通过useLocation直接判断pathname的方式可行，但可以优化得更简洁内聚，避免重复渲染组件：

方案一：将判断逻辑内聚到NavbarCustom组件 #

把路由判断逻辑移到导航组件内部，App中只需渲染一次NavbarCustom，让组件自己决定是否显示额外链接：

import { useMatch } from 'react-router-dom';

function NavbarCustom() {
  const isSomethingRoute = useMatch('/something');
  return (
    <nav>
      {/* 基础导航链接 */}
      <NavLink to="/">首页</NavLink>
      <NavLink to="/something">Something</NavLink>
      {/* 根据路由动态显示额外链接 */}
      {isSomethingRoute && <NavLink to="/something/extra">Extra</NavLink>}
    </nav>
  );
}

// 简化后的App组件
export default function App() {
  return (
    <>
      <NavbarCustom />
      <main className="container mx-auto p-4">
        <Outlet />
      </main>
    </>
  );
}

useMatch会自动匹配当前路由是否符合给定的路径规则，比直接对比pathname更灵活，还支持动态参数的匹配。

方案二：利用路由配置直接关联导航组件 #

如果不同路由需要完全不同的导航结构，可以在路由配置中直接绑定对应的导航组件，借助React Router的匹配机制自动渲染：

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

export default function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={<NavbarCustom />} />
        <Route path="/something" element={<NavbarCustom showSomethingExtra />} />
      </Routes>
      <main className="container mx-auto p-4">
        <Outlet />
      </main>
    </>
  );
}

这种方式完全避免了手动判断pathname的代码，逻辑更清晰。

2. 关于“自动命名路由” #

React Router v6没有内置的命名路由机制（即通过路由名称跳转/匹配），但可以自己维护路由配置对象实现类似效果，避免硬编码路径：

// 单独的路由配置文件（比如routes.js）
export const routes = {
  home: '/',
  something: '/something',
  somethingExtra: '/something/extra'
};

// 使用时
import { routes } from './routes';

// 跳转场景
<NavLink to={routes.something}>Something</NavLink>

// 判断场景
const isSomethingRoute = useMatch(routes.something);

这种方式统一管理所有路由路径，后续修改只需调整配置文件，不用在多处替换字符串。

3. 处理包含可选参数的路由 #

定义路由时，用:参数名?的格式标记可选参数（比如/user/:id?），然后用useParams获取参数，再根据参数是否存在处理渲染逻辑：

示例： #

// 路由定义
<Route path="/user/:id?" element={<UserPage />} />

// 组件内处理逻辑
import { useParams } from 'react-router-dom';

function UserPage() {
  const { id } = useParams();
  return (
    <div>
      {id ? <UserProfile userId={id} /> : <UserList />}
    </div>
  );
}

如果是在导航组件中判断带可选参数的路由，useMatch同样能匹配：

const isUserRoute = useMatch('/user/:id?');
// 不管路径是/user还是/user/123，都会匹配成功

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