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

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>

但是当我这样包装它时，它不会给出任何错误，但搜索栏根本不会在我的浏览器中显示 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 功能道具消失了。路由属性也不见了，即 history、location 和 match，这就是为什么您需要 useNavigate 钩子来获取 navigate 函数的原因 Search.

据我所知，Search 仅在旧教程中由 Route 渲染，只是为了让 history 对象作为道具传入。我看不出有任何理由让 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 挂钩将起作用。

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

What is the best way to render a search bar component that takes in a props in another component using react v6

html

javascript

search

reactjs

react-router