Instantsearch不使用React数据不显示

Question

我有我的实例化搜索，当我运行它的时候，它运行的非常好，如下所示

​

​

但是，当我试图将其与路由器域集成时，路由器上的某个内容似乎导致我的即时搜索结果不被呈现。我的即时搜索正在部署在

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>
        {/* Routes from telent */}
        <Route path="/" element={<HomePage />} />
        <Route path="/dashboard/telent" element={<TelentHomePage />} />
        <Route path="/dashboard/telent/findwork" element={<TelentHomePage />} />
        {/* Routes for hiring */}
        <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 from 'instantsearch.js';
import {
  InstantSearch,
  Hits,
  SortBy,
  SearchBox,
  Pagination,
  Highlight,
  ClearRefinements,
  RefinementList,
  Configure,
  Snippet
} from "react-instantsearch-dom";
import { instantMeiliSearch } from '@meilisearch/instant-meilisearch';
import algoliasearch from 'algoliasearch/lite';

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


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




export default Discover;

知道为什么会这样吗？

​

​

Answer 1

解决了这个问题。这是正确的密码。

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

import { createRoot } from 'react-dom/client';
const container = document.getElementById('root');
const root = createRoot(container);
createRoot(document.getElementById('root')).render(<App> App</App>)


reportWebVitals();

以前是

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. 
reportWebVitals();