Instant Search Router

How do i search without having to change the page, just render elements and if there is no input on search stay on the same page i want to achive similar search like http://www.manning.com. My search bar is in the template so i want whenever i search to show the store items without having to redirect.

<main>
 <input type="text" name="search" />
<Switch>
       <Route path="/" component={Home} />
       <Route path="/store" component={Store} />
      <Route path="/about" component={About} />
</Switch>
</main>

Hey there,

You can use a single route with a component that toggles the home page content and the search content. To keep track of the query being typed, you can use the onSearchStateChange prop.

I built an example in this sandbox.

Yeah but i’m already using React Router so i need this function to be with React Router is there any possible way to do this? or an example

Please provide your example on a React sandbox and we’ll work our way from there.

https://github.com/kwasik-com/kwasikwasi I want when i search on my template on any page to show my items from testComponent.js

If you want the search box to appear on all pages (not only on the home page), you can wrap the Switch with the InstantSearch component.

The box is already visible on all pages because it’s in the template. But if i search i want only 1 component to be shown just like http://www.manning.com search functionality so than i can search my json data

As stated in my previous message, having a reproducible example that we can work from would allow to have the full context. Here’s a React Router sandbox. Please reproduce the minimal environment you have so we’re on the same page.

https://codesandbox.io/s/example-react-router-dchff Now on the Switch i want whenever i search i want the items of the Test Component to be shown instant on the template

Here’s a minimal solution where the search box interacts with InstantSearch. It uses connectSearchBox because you use InputBase from Material UI.

Hope this helps!

Thank you! Can you please explain to me how can i use my own data

I provided some hints and a solution for your app but I’m afraid we can go as far as creating a complete implementation.

Hope this makes sense!