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

Question

I'm learning reactjs and I'm trying to appear a search bar in Home section and to disappear it in the Shop section (or other sections).

To better understand, I leave you a reference image: The final result must be like this

This is the code of my component:

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;

And this is how I've imported my component into the Router

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;

I've also other files .js for the continers of my sections

Thank you all!

Answer 1

If you create separate components for Nav and Search, life becomes much easier. Place your Search component inside your Nav component, then render Search only at certain addresses (ie anything other than /Shop).

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

This technique exposes location through withRouter to get the current path (/pageName). Then, it uses conditional rendering to hide the Search if the location is "/Shop."