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

Question

我有我的搜索组件，它应该传递到标头组件，但我使用的教程是旧的，并且使用的是旧版本的 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>

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

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

我还读到我的 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 组件的最后一个 sn-p 是正确的。

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钩子来获取Search中的navigate函数。

据我所知，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 挂钩将起作用。

Answer 2

我在这里遇到同样的问题。你是如何修复后端产品控制器的？