CODEWITHSUNDEEP
reactjsmeilisearchinstantsearch
Adam
Adam

Reputation: 1285

Instantsearch not working with React - Data not displaying

I have my instantsearch which is working perfectly fine when i run it as is as shown below

enter image description here

However, when I tried to integrate it wit router dom, it seems something on the router dom is causing my instantsearch results to not be rendered. my instant search is being deployed inside the 

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;

Any idea why this is happening?

enter image description here

Upvotes: 0

Views: 157

Answers (1)

Adam
Adam

Reputation: 1285

Managed to resolve it. This is the right code.

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();

Formerly it was

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();

Upvotes: 1

Related Questions