React集成react-router-dom后InstantSearch无法显示数据问题排查

我使用的InstantSearch单独运行时完全正常，但将其与react-router-dom集成后，路由配置导致InstantSearch的结果无法渲染，该组件部署在对应路由下。相关代码如下：

App.js #

import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import HomePage from "./pages";
import HiringHomePage from "./pages/hiring";
import TelentHomePage from "./pages/telent";

const App = () => {
  return (
    <Router>
      <Routes>
        {/* 求职者端路由 */}
        <Route path="/" element={<HomePage />} />
        <Route path="/dashboard/telent" element={<TelentHomePage />} />
        <Route path="/dashboard/telent/findwork" element={<TelentHomePage />} />
        {/* 招聘端路由 */}
        <Route path="/dashboard/hire" element={<HiringHomePage />} />
        <Route path="/dashboard/hire/discover" element={<HiringHomePage />}/>
        <Route path="/dashboard/hire/discover/profile-description" element={<HiringHomePage />}/>
      </Routes>
    </Router>
  );
};

Discover.js #

import "instantsearch.css/themes/algolia-min.css";
import {
  InstantSearch,
  Hits,
  SearchBox
} from "react-instantsearch-dom";
import { instantMeiliSearch } from '@meilisearch/instant-meilisearch';

const searchClient = instantMeiliSearch(
  "xxx",
  "xxx"
);

const Discover = () => (
  <InstantSearch searchClient={searchClient} indexName="gurucool_dev">
    <SearchBox />
    <Hits />
  </InstantSearch>
);

export default Discover;

可能的原因及解决办法 #

• 组件未正确挂载：你的路由/dashboard/hire/discover指向的是HiringHomePage，但搜索组件是Discover。请确认Discover是否已在HiringHomePage中被引入并渲染，这是最常见的遗漏点。
• 路由与InstantSearch的URL状态冲突：InstantSearch默认会将搜索参数同步到URL的查询字符串，这可能和react-router-dom的路由管理产生冲突。可以手动管理搜索状态，避免依赖URL：

  import { useState } from 'react';
  
  const Discover = () => {
    const [searchState, setSearchState] = useState({});
    
    return (
      <InstantSearch
        searchClient={searchClient}
        indexName="gurucool_dev"
        searchState={searchState}
        onSearchStateChange={setSearchState}
      >
        <SearchBox />
        <Hits />
      </InstantSearch>
    );
  };
  

• 路由层级导致的样式覆盖：检查HiringHomePage或其父组件的CSS，是否存在隐藏子组件、设置overflow: hidden或z-index层级过低等情况，导致InstantSearch元素被遮挡。
• 网络请求异常：打开浏览器控制台查看网络请求，确认Meilisearch的API请求是否成功发送并返回数据。路由切换可能引发的跨域或请求拦截问题也需要排查。

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