React带参路由配置问题：访问图书列表页时单图书组件误触发API请求

当前异常一般由两个层面的问题叠加导致：

• 未使用Switch组件包裹路由时，React Router会渲染所有满足路径匹配规则的路由，不会在命中第一个规则后终止匹配。/books/bookshome这个路径本身完全符合/books/:slug的匹配规则，会让SingleBook组件和BookList组件同时被挂载，进而触发SingleBook内部的请求逻辑，这时候哪怕在组件内加判断，只要组件被挂载，就可能因为执行时机问题拦不住请求。
• 之前的判断逻辑没生效，大概率是取slug的时机不对：比如useEffect执行的时候，还没有从路由上下文拿到正确的slug值，判断语句执行时slug还是空值，自然会跳过判断发起请求。

方案1：调整路由结构，从根源避免无效组件挂载 #

这是最优先要做的配置，不需要在业务组件里加冗余判断：

• 用Switch组件包裹所有路由规则，保证匹配到第一个符合条件的路由后立刻停止向下匹配。
• 把静态路径的路由声明放在动态参数路由前面，保证静态路径的匹配优先级高于动态通配路由。
• 参考配置示例：

import { Switch, Route } from 'react-router-dom'

// 路由容器部分
<Switch>
  {/* 静态静态路由放在最前面 */}
  <Route exact path="/books/bookshome" component={BookList} />
  {/* 动态参数路由放在后面 */}
  <Route exact path="/books/:slug" component={SingleBook} />
</Switch>

如果使用React Router v6版本，将Switch替换为Routes组件即可，匹配逻辑完全一致，同样支持静态路由优先于动态通配路由的优先级。
这种配置下，访问/books/bookshome时只会命中第一个路由规则，正常渲染BookList组件，SingleBook组件根本不会被挂载，自然不会触发无效API请求。

方案2：修正组件内的兜底判断逻辑 #

路由配置完成后，可以在SingleBook组件内加一层防护，避免后续其他配置变动再次触发无效请求：

• 用useParams钩子从路由上下文同步获取slug参数，不要在useEffect内部异步获取slug值。
• 把slug加入useEffect的依赖数组，保证slug值更新后才执行对应逻辑，把拦截判断写在请求发起的最前面：

import { useEffect } from 'react'
import { useParams } from 'react-router-dom'

const SingleBook = () => {
  // 同步获取路由中的slug参数
  const { slug } = useParams()

  useEffect(() => {
    // 命中保留路径直接终止逻辑，不发起请求
    if (slug === 'bookshome') return
    // 后续正常写单本图书的数据获取逻辑
    fetch(`/api/book-info/${slug}`)
  }, [slug]) // 把slug加入依赖数组
}

方案3：优化URL设计（长期更规范的实践） #

• 尽量避免静态保留路径和动态参数路径出现语义撞车，从URL分层上减少路由匹配冲突的概率。比如可以把图书列表页的路径调整为/books/list，详情页保持/books/:slug的结构，从URL语义上就避免保留词和动态参数的冲突，后续扩展路由时也不容易出现匹配问题。

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