Navigation bar as a layout in react

Question

I'm creating an app that has a search bar in al pages (like a layout). When you search it shows the results. You can click on one result an get the Details which is another component.

My Question is where to put this search component to be able to display it in all pages. And when I click the search button the Details disappear and display the results again.

Here is the app layout.

Any help link or tutorial will be thankful.

Answer 1

You can put search bar in header component and add this to every page. When you search any text in search bar and then enter, it should open Detail page.For this you can use following in action file of search bar.

onSearchClick(text)(dispatch).then(() => (browserHistory.push(`/search?searchText=${text}`)))

and add below to route.jsx file

<Route path={Config.fullPath("/search")} component={Detail}>
      <Route path=":searchValue"/>
</Route>

and in Detail.jsx file extract searchValue as

const searchValue = ownProps.location.query.searchValue;

Form here you can open Detail page for any seacrh value.

Answer 2

What you can do is create an Appshell component, that has the search bar and a content container, that renders the children passed to it through props. I have recently completed a react redux product using this kind of design and it is effective for two reasons.

1. The search value can be kept in the state of the appshell and hence can be passed on to any component.
2. Also, this design structure is very neat and intuitive.

Here is a link to my project. Take a look at my src/App.js , and then head to the src/components/Appshell directory. The code is well be pretty easy to understand.

<Appshell> <SomeOtherComponent/> </Appshell> 

The best use case of this would be with the react-router. You can see that in my code as well in the App.js file.

Hope it helps. A diagram to help you understand the design