訪問したセクションに従って検索バーを表示します（React.js）編集

debugcn 投稿 Dev

フェデリコパペッティ

私はreactjsを学習していて、ホームセクションに検索バーを表示し、ショップセクション（または他のセクション）に検索バーを表示しないようにしようとしています。

これは私のコンポーネントのコードです：

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;

私のセクションの継続のために他のファイル.jsもあります

皆さん、ありがとうございました！

それは私ではありません

NavとSearchに別々のコンポーネントを作成すると、作業がはるかに簡単になります。SearchコンポーネントをNavコンポーネント内に配置し、特定のアドレス（つまり、/ 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);

この手法では、withRouterを介して場所を公開し、現在のパス（/ pageName）を取得します。次に、場所が「/ Shop」の場合、条件付きレンダリングを使用して検索を非表示にします。