如何在React Router 4中判断路由是否有效？

嘿，这个问题我之前也踩过坑！React Router 4.x彻底重构了路由体系，原来的router.match()确实没法直接用了，不过我们有几种非常靠谱的方案来实现相同的需求，还能完美解决你提到的外部链接问题。

React Router 4.x暴露了底层的matchPath工具函数，它的作用就是判断给定路径是否匹配指定的路由规则，逻辑和旧版本的match()完全一致，是官方推荐的替代方案。

步骤1：导入matchPath #

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

步骤2：维护你的路由规则列表 #

你需要把应用里所有的有效路由规则整理成一个数组（可以直接复用路由配置里的规则，避免重复维护）：

// 示例路由规则，根据你的实际项目调整
const appRoutes = [
  { path: '/', exact: true }, // 首页，开启exact精确匹配
  { path: '/about' },
  { path: '/users/:userId' }, // 带动态参数的路由
  { path: '/articles/*' } // 通配符路由，匹配/articles下的所有子路径
];

步骤3：编写判断函数 #

这个函数会先排除外部链接，再检查路径是否匹配任何内部路由：

function isValidInternalRoute(path) {
  // 先判断是否为外部链接（以http/https开头）
  if (/^https?:\/\//i.test(path)) {
    return false;
  }
  // 遍历路由规则，只要有一条匹配就返回true
  return appRoutes.some(route => matchPath(path, route));
}

步骤4：封装动态链接组件 #

现在可以写一个通用组件，根据路径有效性自动切换Link或a标签：

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

function DynamicLink({ to, children, ...props }) {
  const shouldUseLink = isValidInternalRoute(to);

  if (shouldUseLink) {
    return <Link to={to} {...props}>{children}</Link>;
  } else {
    // 外部链接或无效内部路由，使用原生a标签，添加安全属性
    return (
      <a 
        href={to} 
        target="_blank" 
        rel="noopener noreferrer" 
        {...props}
      >
        {children}
      </a>
    );
  }
}

这个方案的优势是完全贴合React Router的内部匹配逻辑，不会出现规则不一致的问题，维护成本也很低。

如果你的路由规则是动态生成的，或者不想在组件里硬编码路由列表，可以通过React上下文（Context）来全局共享路由规则，这样所有组件都能访问到最新的路由配置。

步骤1：创建路由匹配上下文 #

import { createContext, useContext } from 'react';

// 创建上下文，默认值为空数组
const RouteConfigContext = createContext([]);

// 封装Provider组件，用来传递路由规则
export function RouteConfigProvider({ routes, children }) {
  return (
    <RouteConfigContext.Provider value={routes}>
      {children}
    </RouteConfigContext.Provider>
  );
}

// 封装自定义Hook，方便组件获取路由规则
export function useRouteConfig() {
  return useContext(RouteConfigContext);
}

步骤2：在根组件注入路由规则 #

import { RouteConfigProvider } from './RouteConfigContext';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

// 你的路由配置
const appRoutes = [/* ... */];

function App() {
  return (
    <Router>
      <RouteConfigProvider routes={appRoutes}>
        {/* 你的路由组件和其他应用内容 */}
        <Switch>
          {appRoutes.map(route => (
            <Route key={route.path} {...route} />
          ))}
        </Switch>
      </RouteConfigProvider>
    </Router>
  );
}

步骤3：在动态链接组件中使用 #

import { Link } from 'react-router-dom';
import { useRouteConfig } from './RouteConfigContext';
import { matchPath } from 'react-router-dom';

function DynamicLink({ to, children, ...props }) {
  const appRoutes = useRouteConfig();
  
  const shouldUseLink = !/^https?:\/\//i.test(to) 
    && appRoutes.some(route => matchPath(to, route));

  // 后续逻辑和方案一一致
}

这个方案适合路由规则经常变化的大型应用，能保证所有组件使用的路由规则都是最新的。

• 外部链接安全：使用原生a标签时，一定要加上target="_blank"和rel="noopener noreferrer"，这是浏览器安全最佳实践，防止外部页面通过window.opener操控你的应用。
• 路由匹配规则：确保你的路由规则包含exact、strict等必要属性，比如首页路由如果不加exact: true，matchPath会把所有子路径都匹配成首页路由，导致判断错误。
• 动态参数路由：matchPath会自动识别动态参数（比如/users/:userId），所以像/users/123这种路径会被正确判定为有效内部路由。

这样就能完美替代旧版本router.match()的功能，同时解决外部链接和无效内部路由的路由问题了！

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