javascript - 根据访问的部分显示搜索栏(React.js)编辑

Question

我正在学习 reactjs，我正在尝试在主页部分显示一个搜索栏，并在商店部分(或其他部分)将其消失。

为了更好地理解，我给你留了一张引用图片: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

谢谢大家!

Answer 1

如果您为 Nav 和 Search 创建单独的组件，生活就会变得容易得多。将您的 Search 组件放在 Nav 组件内，然后仅在特定地址(即/Shop 以外的任何地址)呈现 Search。

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

此技术公开了 location通过withRouter获取当前路径 (/pageName)。然后，它使用 conditional rendering如果位置是“/Shop”，则隐藏搜索。