[英]Navigation bar as a layout in react
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. 任何帮助链接或教程将不胜感激。
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.jsx
文件
<Route path={Config.fullPath("/search")} component={Detail}>
<Route path=":searchValue"/>
</Route>
and in Detail.jsx
file extract searchValue
as 并在
Detail.jsx
文件中将searchValue
提取为
const searchValue = ownProps.location.query.searchValue;
Form here you can open Detail page for any seacrh value. 您可以在此处打开任何Seacrh值的“详细信息”页面。
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. 您可以做的是创建一个Appshell组件,该组件具有搜索栏和内容容器,该容器呈现通过prop传递给它的子级。 I have recently completed a react redux product using this kind of design and it is effective for two reasons.
我最近使用这种设计完成了React Redux产品,它之所以有效,有两个原因。
Here is a link to my project. 这是我的项目的链接 。 Take a look at my src/App.js , and then head to the src/components/Appshell directory.
看一下我的src / App.js ,然后转到src / components / Appshell目录。 The code is well be pretty easy to understand.
该代码非常容易理解。
<Appshell> <SomeOtherComponent/> </Appshell>
The best use case of this would be with the react-router. 最好的用例是使用react-router。 You can see that in my code as well in the App.js file.
您也可以在我的代码中的App.js文件中看到这一点 。
Hope it helps. 希望能帮助到你。 A diagram to help you understand the design
有助于您理解设计的图表
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.