React Router中<Route path='/'>与<Route path='*'>的功能差异及选择依据

嘿，这个问题问得特别到位——刚上手React Router的时候，确实很容易被路由匹配的规则绕晕😅。我来给你拆解清楚这两者的核心区别，以及各自适合用在什么场景：

一、先搞懂两者的基础匹配逻辑 #

1. 不带 exact 的 <Route path="/"> #

React Router 默认是前缀匹配规则，也就是说，只要 URL 的开头和 path 一致，这个路由就会被命中。

• 不带 exact 的 path="/" 会匹配所有以 / 开头的 URL——而 Web 应用里几乎所有合法 URL 都是以 / 开头的（比如 /about、/posts/123、/foo/bar 等等）。
• 举个例子：如果同时定义了 <Route path="/"> 和 <Route path="/about">，当用户访问 /about 时，这两个路由都会被匹配到，对应的组件都会渲染。

2. <Route path="*"> #

* 是通配符匹配，它的规则是匹配所有未被前面路由命中的 URL，而且优先级是最低的：

• 只有当用户访问的 URL 不匹配前面任何一个路由时，这个通配符路由才会生效。
• 它不会和其他路由“抢”匹配权，前提是你把它放在所有路由的最后面（React Router 是按路由定义顺序匹配的）。

二、核心功能差异 #

我把两者的差异整理成了几个关键点：

• 匹配范围的精准度：
  • path="/"（不带 exact）是前缀匹配，只要 URL 开头是 / 就命中，属于“宽泛但有前缀限制”的匹配；
  • path="*" 是无差别兜底匹配，不管 URL 是什么，只要前面没匹配到就命中，属于“最宽泛的终极匹配”。
• 与其他路由的兼容性：
  • path="/"（不带 exact）会和所有子路由（比如 /about、/posts）同时匹配，适合用来渲染全局通用组件；
  • path="*" 只会在其他路由都不匹配时生效，不会干扰正常路由的渲染。
• 优先级：
  • path="/" 的优先级和定义顺序有关，如果放在前面，会先于子路由被匹配；
  • path="*" 优先级最低，必须放在路由列表最后才有用。

三、各自的使用动机 #

选择不带 exact 的 path="/" #

当你需要某个组件在所有页面都显示的时候，就适合用它：

• 比如全局导航栏（Navbar）、侧边栏、全局状态容器（比如 Redux Provider 或者 Context Provider）、全局样式组件等等。
• 举个代码例子：

// 全局导航会在所有页面渲染
<Route path="/">
  <Navbar />
</Route>
<Route path="/about" component={AboutPage} />
<Route path="/posts" component={PostsList} />

用户访问任何页面，Navbar 都会一直存在，因为 path="/" 匹配了所有 URL 的前缀。

选择 path="*" #

它的核心作用就是处理404页面：

• 当用户输入了一个不存在的路由（比如 /random-page-that-doesnt-exist），前面的所有路由都匹配不上，这时候通配符路由就会触发，渲染“页面找不到”的提示组件。
• 代码例子（注意必须放在最后）：

<Route path="/about" component={AboutPage} />
<Route path="/posts" component={PostsList} />
// 兜底的404页面，必须放在最后
<Route path="*" component={NotFoundPage} />

补充：React Router v6 的小变化 #

如果你用的是 React Router v6，匹配规则有一点调整：

• 现在 path="/" 默认是精确匹配，要实现原来的前缀匹配，需要写成 path="/*"；
• path="*" 的作用没变，还是用来做404兜底，不过 v6 里推荐用 <Route path="*" element={<NotFoundPage />} /> 的写法。

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