React Router移除Route的exact属性后路由匹配异常排查

你遇到的不是路由bug，是对React Router匹配规则的认知存在两个偏差：

• 所有前端路由的路径匹配都不是按字符串字符做前缀匹配，而是按/分割后的独立路径段做匹配。你以为/c是/create的字符串前缀就能匹配，但实际上两个路径的第一段分别是c和create，属于完全不同的路径段，不存在前缀匹配关系。
• 不同大版本的React Router匹配逻辑差异极大，不能混用v5和v6的规则判断结果。

分版本规则说明 #

React Router v6 #

v6的<Routes>组件默认采用段级精确匹配+最优匹配优先逻辑，已经移除了v5时代的顺序匹配、前缀匹配规则，也不再需要手动加exact属性：

• 配置path="/c"时，仅能匹配/c本身，以及/c/xxx这类/c后紧跟斜杠+子路径的地址（子路由场景），完全不会匹配/create。
• 访问/create时，路由会自动命中路径完全匹配的/create规则，渲染Create组件，这是符合框架设计的正常表现。
• 配置path="/"时功能正常，是因为/是根路径，当没有其他更精确的路由命中时会作为兜底渲染，但只要存在/create这类更具体的路径，v6会优先渲染更匹配的对应组件。

React Router v5 #

v5的<Switch>组件采用从上到下顺序匹配、命中即停的逻辑，不带exact属性的路由会按路径段做前缀匹配：

• 你把path="/"的路由放在最前面且不加exact时，所有地址（包括/create）都会因为以/开头，直接命中第一个Home路由，根本走不到后面的Create路由，这就是你觉得“表现异常”的根源——匹配顺序和exact配置没对应上。
• 同样，path="/c"不带exact也只能匹配/c、/c/xxx这类路径段匹配的地址，无法匹配/create。

备注：你使用的npx json-server --watch data/db.json --port 8000启动命令仅负责提供Mock接口服务，和前端路由匹配逻辑没有任何关联，不会导致路由异常。

React Router v6 写法 #

v6不需要配置exact，直接按路径写即可，框架会自动优先匹配更具体的路由：

function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />
        <div className="content">
          <Routes>
            {/* 根路径匹配Home */}
            <Route path="/" element={<Home />} />
            {/* /create路径匹配Create */}
            <Route path="/create" element={<Create />} />
            {/* 如果需要匹配/c下所有子路径，加*通配符即可，不会匹配/create */}
            {/* <Route path="/c/*" element={<Home />} /> */}
          </Routes>
        </div>
      </div>
    </Router>
  );
}

React Router v5 写法 #

v5有两种正确配置方式，二选一即可：

1. 给根路径加exact属性，保证只有访问根路径时才渲染Home

<Router>
  <div className="App">
    <Navbar />
    <div className="content">
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/create">
          <Create />
        </Route>
      </Switch>
    </div>
  </div>
</Router>

2. 调整路由顺序，把更具体的路径放在前面，不需要给根路径加exact也能正常匹配

<Router>
  <div className="App">
    <Navbar />
    <div className="content">
      <Switch>
        {/* 更具体的/create放前面，优先匹配 */}
        <Route path="/create">
          <Create />
        </Route>
        {/* 根路径放最后做兜底 */}
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </div>
  </div>
</Router>

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