Javascript 根据访问的部分（React.js）编辑显示搜索栏

我正在学习reactjs，我试图在主页部分出现一个搜索栏，然后在商店部分（或其他部分）中消失它

为了更好地理解，我给您留了一张参考图片：

这是我的组件的代码：

import React，{Component}来自'React'；
从“react bootstrap”导入{Nav，Button，Navbar，Form，FormControl}；
从'react router dom'导入{NavLink}；
从“../App”导入{AuthButton}；
从“../img/logo.png”导入徽标
类头扩展组件{
render（）{
返回(
家

关于

商店

帮助
你的车
)
}
}
导出默认标题；

这就是我将组件导入路由器的方式

从“React”导入React；
导入“./styles/App.css”；
从“./集装箱/车间”导入车间；
从“./container/Shopping”导入购物；
从“./集装箱/装运”导入装运；
从“/集装箱/付款”导入付款；
从“./container/home”导入home；
从“./容器/产品”进口产品；
从“/container/iPhone”导入iPhone；
从“/container/iPad”导入iPad；
从“./components/SignInfo”导入SignInfo格式；
从“react Router dom”导入{BrowserRouter as Router，Route，withRouter，Redirect，Switch}；
从“react bootstrap”导入{Button、ButtonToolbar、OverlyTrigger、Popover}；
函数App（）{
返回(
404未找到
}/>
);
}
导出默认应用程序；

我还为我的部分的continers创建了其他文件.js

---

谢谢大家!

如果您为导航和搜索创建单独的组件，生活会变得容易得多。将搜索组件放在导航组件内，然后仅在特定地址（即除/Shop以外的任何地址）进行搜索

从“React”导入React；
从“react router dom”导入{withRouter}；
从“/.Nav”导入导航；
函数SearchComponent（）{
返回我的搜索栏；
}
功能MyComponent（道具）{
const path=props.location.pathname；
返回(
{path！==“/Shop”&&&}
);
}
使用路由器导出默认值（MyComponent）；

---

此技术通过公开获取当前路径（/pageName）。然后，如果位置为“/Shop”，则它用于隐藏搜索。

我最初的回答显示搜索栏位于“/Shop”。我编辑了回答，将搜索栏隐藏在“/Shop”以匹配OP的用例。您的编辑完全更改了问题。我建议您删除编辑，保留接受的答案不变。然后用一个最小的、可重复的例子发布一个新问题。这将为您提供两个问题的完整答案。

import React, {Component} from 'react';
import {Nav, Button, Navbar, Form, FormControl} from 'react-bootstrap';
import {NavLink} from 'react-router-dom';
import {AuthButton} from '../App';
import logo from '../img/logo.png'

class Header extends Component{
    render(){
        return(
            <>
                <Navbar>
                    <div>
                        <img src={logo} className='main-logo'/>
                    </div>
                    <Form className='form'>
                        <Button className='btn-search'/>
                        <FormControl type="text" placeholder="Search..." className='barra'/>
                    </Form>                                        
                    <Nav className="ml-auto">
                        <NavLink className= 'nav-link' to='/'>Home</NavLink>
                        <hr className='hr-header'/>
                        <Nav.Link className= 'nav-link'>About</Nav.Link>
                        <hr className='hr-header'/>
                        <NavLink className= 'nav-link' to='/Shop'>Shop</NavLink>
                        <hr className='hr-header'/>
                        <Nav.Link className= 'nav-link'>Help</Nav.Link>
                    </Nav>        
                    <NavLink to='/Shopping'>           
                        <Button className='btn-cart' variant="secondary">
                        Your Cart                       
                        </Button>                        
                    </NavLink>
                    <AuthButton/>
                </Navbar>

            </>
        )
    }
}
export default Header;

import React from 'react';
import './styles/App.css';
import Shop from './container/shop';
import Shopping from './container/shopping';
import Shipping from './container/shipping';
import Payment from './container/payment';
import home from './container/home';
import Product from './container/Product';
import iPhone from './container/iPhone';
import iPad from './container/iPad';
import SignInForm from './components/SignInForm';
import {BrowserRouter as Router, Route, withRouter, Redirect, Switch} from 'react-router-dom';
import {Button, ButtonToolbar, OverlayTrigger, Popover} from 'react-bootstrap';

    function App(){
      return (
        <Router>           
          <Route>      
            <Switch>
              <Route exact path='/' component={home}/>
              <Route path='/Shop' component={Shop}/>
              <Route path='/Product' component={Product}/>
              <Route path='/iPhone' component={iPhone}/>
              <Route path='/iPad' component={iPad}/>
              <PrivateRoute path='/Shopping' component={Shopping}/>
              <Route path='/Shipping' component={Shipping}/>
              <Route path='/Payment' component={Payment}/>
              <Route path='/SignInForm' component={SignInForm}/>
              <Route path='*' component={() => <div 
                  style = {{ 
                    textAlign: 'center', 
                    paddingTop: 250,
                    fontSize: 30
                  }}> 
                    <strong>404 NOT FOUND</strong>
                  </div>}/>
            </Switch>        
          </Route>
        </Router>
      );
    }
    export default App;

import React from "react";
import { withRouter } from "react-router-dom";
import Nav from "/.Nav";

function SearchComponent() {
  return <div>My search bar</div>;
}

function MyComponent(props) {
  const path = props.location.pathname;
  return (
    <div>
      <Nav>{path !== "/Shop" && <SearchComponent />}</Nav>
    </div>
  );
}

export default withRouter(MyComponent);