如何避免React Router Link跳转动态路由前先跳转到根路由'/'？

实现流程 #

• 用户执行搜索操作
• 应用返回包含搜索关键词的Subreddit列表
• 每个Subreddit组件通过Link跳转至动态路由r/:subreddit
• 该路由的loader负责获取对应Subreddit的最新帖子，原本通过window.location.pathname提取Subreddit名称并调用Reddit API

遇到的问题 #

React Router在路由跳转过程中，会先将window.location.pathname临时改为/，再切换到目标路径/r/:subreddit。这导致loader执行时拿到的是/，无法正确获取对应Subreddit的数据。

尝试过的无效方案 #

• 在loader中使用setTimeout延迟获取路径，无法避开路由跳转的中间状态
• 在Feed组件中使用useEffect监听路径变化，同样无法解决loader执行时机的问题

解决方案 #

使用React Router loader参数中的request对象获取正确路径。request.url指向当前要加载的目标路由的完整URL，不受跳转过程中的临时路径影响。修改后的loader代码如下：

export async function subreddit({ request }) {
    const currentURL = new URL(request.url);
    const pathname = currentURL.pathname;
    const url = `https://www.reddit.com${pathname}.json?raw.json=1`;
    const feed = await fetchHandler(url);
    const elements = redditFilter(feed);
    return {elements, url, pathname};
}

内容的提问来源于stack exchange，提问作者Jossy Solá