标头链接容器导航到导航栏中的搜索 .js 折叠错误

问：

好的，这是我当前的标题，现在我希望当用户单击搜索按钮时，它将导航到导航栏中的搜索栏 折叠

明白我的意思吗？当我单击搜索按钮时，我希望它导航到我的搜索，该怎么做？谁能教我？这是我的代码

我的标头.js

import { Button, Nav,Row,Col, NavLink } from 'react-bootstrap'
import Navbar from 'react-bootstrap/Navbar';
import {LinkContainer} from 'react-router-bootstrap'
import { Container } from 'react-bootstrap';
import '@fortawesome/fontawesome-free/css/all.min.css';
import {Image} from 'react-bootstrap';
import { useEffect,useRef } from 'react';
import { getProfilePictureAction } from '../actions/profilePictureActiom';
import { useDispatch } from 'react-redux';
import { useSelector } from 'react-redux/es/hooks/useSelector';
import NavDropdown from 'react-bootstrap/NavDropdown';
import { Form } from 'react-bootstrap';
import { useState } from 'react';
import Search from './Search';
import { Link } from 'react-router-dom';

function Header() {
  const [windowWidth,setWindowWidth]=useState(window.innerWidth)
  const profilePicture=useSelector(state=>state.profilePicture)
  const [isHamburgerOpen,setIsHamburgerOpen]=useState(false);
  const {loading,picture}=profilePicture
  const dispatch=useDispatch()
  
  useEffect(()=>{
    dispatch(getProfilePictureAction())
    
  },[dispatch])

  return (
    <>
      
      {/* mobile phone equal to 992 pixel or below 992 pixel between 576 pixel */}
      <div className={`d-none d-sm-block d-md-block d-lg-none d-xl-none ${isHamburgerOpen ? 'hamburger-open':''} `}>  {/* screen size md and sm will display all these content */}
        <Navbar expand="lg" className="bg-body-tertiary bg-white">
          <Container className='custom-hamburger-gap'>
            <div className='me-auto'>
            {picture && (
              <div className='mobile-profile-container'>
                  <LinkContainer to='/'>
                        <Image className='mobile-profile-image' src={picture.profile_picture} alt='profile' width={300} height={300} />
                  </LinkContainer>
                </div>
            )}
            </div>
            
            <div className='me-auto d-flex align-items-center top-right'>
            <LinkContainer to="/search" style={{ marginLeft: '20px' }}>
          <Nav.Link className="d-flex flex-column align-items-center">
            <i className="fa-solid fa-magnifying-glass"></i>
            <div>Search</div>
          </Nav.Link>
        </LinkContainer>
                <LinkContainer style={{marginLeft:'20px'}} to='/login'>
                  <Nav.Link className="d-flex flex-column align-items-center">
                  <i className="fa-sharp fa-solid fa-arrow-right-to-bracket"></i>
                  <div>
                    Login
                  </div>
                  </Nav.Link>
                </LinkContainer>
            <LinkContainer style={{marginLeft:'20px'}} to='/register'>
                  <Nav.Link className="d-flex flex-column align-items-center">
                  <i className="fa-solid fa-user"></i>
                  <div>
                    Sign Up
                  </div>
                  </Nav.Link>
                </LinkContainer>
                <LinkContainer style={{marginLeft:'20px'}} to='/cart'>
                  <Nav.Link className="d-flex flex-column align-items-center">
                    <i className='fas fa-shopping-cart'></i>
                    <div>
                      Cart
                    </div>
                  </Nav.Link>
                </LinkContainer>
                <Navbar.Toggle aria-controls="basic-navbar-nav" style={{marginLeft:'20px'}} className='mb-3 hamburger-menu' onClick={()=>setIsHamburgerOpen(!isHamburgerOpen)} />
            </div>
              
            <Navbar.Collapse id="basic-navbar-nav" className='custom-navbar-collapse'>
              <Nav className="ms-auto navbar-collapse-gap">
              <div className='search-md-sm'>
            <Search />
          </div>
              <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#link">Link</Nav.Link>
            <NavDropdown title="Dropdown" id="basic-nav-dropdown">
              <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
              <NavDropdown.Item href="#action/3.2">
                Another action
              </NavDropdown.Item>
              <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item href="#action/3.4">
                Separated link
              </NavDropdown.Item>
            </NavDropdown>
              </Nav>
            </Navbar.Collapse>
          </Container>
        </Navbar>
      </div>
      
    </>
  )
}

export default Header

这是我的搜索.js

import React from 'react'
import { Row,Col,Form,Button } from 'react-bootstrap'
import { useNavigate } from 'react-router-dom'

function Search() {
  const navigate=useNavigate();
  // const handleSearchClick=()=>{
  //   navigate('/search');
  // }
  return (
    <div id="search">
    <Form className='search-form' style={{ marginTop: '35px' }}>
                  <Row>
                    <Col>
                      <Form.Control
                        type='text'
                        placeholder='Search Flowers, Cakes, Gift & More'
                        style={{ width: '450px',height:'40px', borderTopRightRadius: '0', borderBottomRightRadius: '0', outline: 'none', boxShadow: 'none' }}
                        className='custom-form-control1'
                      />
                    </Col>
                    <Col>
                      <Button className='btn btn-primary bg-dark mobile-search-button' style={{ height:'40px',marginLeft: '-24px', borderTopLeftRadius: '0', borderBottomLeftRadius: '0',display:'flex',alignItems:'center' }}>
                        <i className="search-button fa-solid fa-magnifying-glass" style={{marginRight:'5px'}}></i>Search
                      </Button>
                    </Col>
                  </Row>
                </Form>
                </div>
  )
}

export default Search

这是我的App.js

import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Routes,Route } from 'react-router-dom';
import {Container} from 'react-bootstrap'
import Header from './components/Header';
import HomeScreen from './screens/HomeScreen';
import ProductDetail from './screens/ProductDetail';
import Search from './components/Search';

function App() {
  return (
    <Router>
      <Header />
      <Container>
        <Routes>
          <Route path='/' element={<HomeScreen />} />
          <Route path='/product/:id' element={<ProductDetail />} />
        </Routes>
      </Container>

    </Router>
  );
}

export default App;

我认为问题出在我的 LinkContainer 上

<LinkContainer to="/search" style={{ marginLeft: '20px' }}>
          <Nav.Link className="d-flex flex-column align-items-center">
            <i className="fa-solid fa-magnifying-glass"></i>
            <div>Search</div>
          </Nav.Link>
 </LinkContainer>

如何让搜索按钮导航到

<div className='search-md-sm'>
     <Search />
</div>

在我的导航栏中。

谢谢