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

Question

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

这是我的 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>

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

请问正确的渲染方式是什么？

我还读到 history.push在我的 search.js 中已被 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，因此您的 Search 组件的最后一个片段使用了 useNavigate钩子(Hook)是正确的。

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 函数属性消失了。路线 Prop 也不见了，即 history、location 和 match，这就是为什么您需要 useNavigate钩子(Hook)以获取 Search 中的 navigate 功能。

据我所知，Search 仅由旧教程中的 Route 呈现，只是为了将 history 对象传入 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 Hook 将起作用。