使用 react v6 呈现在另一个组件中接收道具的搜索栏组件的最佳方法是什么

Question

我有我的搜索组件，它应该传递到 header 组件，但我使用的教程是旧的，并且使用的是旧版本的反应。

这是我的 Search.js 组件。

import React, { useState } from 'react'
import { useParams, useNavigate } from 'react-router-dom'

const Search = ({ history }) => {

    const [keyword, setKeyword] = useState('');

    const searchHandler = (e) => {
        e.preventDefault()

        if (keyword.trim()) {
            history.push(`/search/${keyword}`)
        } else {
            history.push('/')
        }
    }

    console.log('my keyword', keyword);

    return (
            <form onSubmit={searchHandler}>
                 <div className="input-group">
                    <input
                        type="text"
                        id="search_field"
                        className="form-control"
                        placeholder="Enter Product Name ..."
                        onChange={(e) => setKeyword(e.target.value)}
                    />
                    <div className="input-group-append">
                        <button id="search_btn" className="btn">
                        <i className="fa fa-search" aria-hidden="true"></i>
                        </button>
                    </div>
        </div>
            </form>       
    )
}

export default Search

这就是我将它传递到我的 Header.js 组件的方式

import React, { Fragment } from 'react'
import { Route, Link } from 'react-router-dom'

import { useDispatch, useSelector } from 'react-redux'
import { useAlert } from 'react-alert'
import { logout } from '../../actions/userActions'

import Search from './Search'

import '../../App.css'

const Header = () => {
    
    
    return (
        <Fragment>
            <nav className="navbar row">
                <div className="col-12 col-md-6 mt-2 mt-md-0">
                
                    <Route render={({ history }) => <Search history={history} />} />
                    
                </div>
             </nav>
        </Fragment>
    )
}

export default Header

每当我运行代码时，它都会告诉我需要将它包装在<Routes>中

我是这样做的

<Routes> 
  <Route render={({ history }) => <Search history={history} />} />
</Routes>

但是当我像这样包装它时它不会给出任何错误但搜索栏根本不会在我的浏览器中显示 header

请问渲染这个的正确方法是什么？

我还读到我的 search.js 中的history.push已被useNavigate取代，所以我尝试更改它以使我的 Search.js 看起来像这样

import React, { useState } from 'react'
import { useParams, useNavigate } from 'react-router-dom'

const Search = ({  }) => {
   
    const [keyword, setKeyword] = useState('');
    const navigate = useNavigate();

    const searchHandler = (e) => {
        e.preventDefault()

        if (keyword.trim()) {
            navigate(`/search/${keyword}`)
        } else {
            navigate('/search')
        }
    }

    console.log('my keyword', keyword);

    return (
            <form onSubmit={searchHandler}>
                 <div className="input-group">
                    <input
                        type="text"
                        id="search_field"
                        className="form-control"
                        placeholder="Enter Product Name ..."
                        onChange={(e) => setKeyword(e.target.value)}
                    />
                    <div className="input-group-append">
                        <button id="search_btn" className="btn">
                        <i className="fa fa-search" aria-hidden="true"></i>
                        </button>
                    </div>
        </div>
            </form>       
    )
}

export default Search

但我不知道如何在我的Header组件中正确渲染它

Answer 1

据我所知，您正在使用react-router-dom v6，因此您使用useNavigate挂钩的Search组件的最后一个片段是正确的。

const Search = () => {
  const [keyword, setKeyword] = useState("");
  const navigate = useNavigate();

  const searchHandler = (e) => {
    e.preventDefault();

    if (keyword.trim()) {
      navigate(`/search/${keyword}`);
    } else {
      navigate("/search");
    }
  };

  console.log("my keyword", keyword);

  return (
    <form onSubmit={searchHandler}>
      <div className="input-group">
        <input
          type="text"
          id="search_field"
          className="form-control"
          placeholder="Enter Product Name ..."
          onChange={(e) => setKeyword(e.target.value)}
        />
        <div className="input-group-append">
          <button id="search_btn" className="btn">
            <i className="fa fa-search" aria-hidden="true"></i>
          </button>
        </div>
      </div>
    </form>
  );
};

但问题是您正在尝试使用较旧的 RRDv5 Route API 在Route上呈现它。

<Route render={({ history }) => <Search history={history} />} />

在 v6 中， component 、 render和children function 道具消失了。 路由道具也不见了，即history 、 location和match ，这就是为什么你需要useNavigate钩子来在Search中获取navigate function 。

据我所知， Search仅由旧教程中的Route呈现，只是为了将history object 作为 prop 传入。 我看不出有任何理由让它由Route呈现。 直接在Header中渲染Search 。

const Header = () => {
  return (
    <nav className="navbar row">
      <div className="col-12 col-md-6 mt-2 mt-md-0">
        <Search />
      </div>
    </nav>
  );
};

假设Header组件在路由器（ BrowserRouter 、 HashRouter 、 MemoryRouter等）提供的路由上下文中呈现， useNavigate钩子将起作用。