javascript - 不要使用 Router React js 渲染搜索组件

Question

使用react-router-dom，我无法将我创建的搜索组件渲染到主 header 组件中。

我认为问题出在这一行 <路线渲染={({history})=>}/>

但是这两天不知道要做什么...

我正在尝试在网站上实现搜索，但卡住了

请帮忙:D

标题.js

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

import Search from './Search';

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

const Header = () => {
  return (
    <Fragment>
      <nav className='navbar row'>
        <div className='col-12 col-md-3'>
          <div className='navbar-brand'>
            <img src='/images/shopit_logo.png' alt='Site logo' />
          </div>
        </div>

        <div className='col-12 col-md-6 mt-2 mt-md-0'>
          <Routes>
            <Route render={({ history }) => <Search history={history} />} />
          </Routes>
        </div>

        <div className='col-12 col-md-3 mt-4 mt-md-0 text-center'>
          <button className='btn' id='login_btn'>
            Login
          </button>

          <span id='cart' className='ml-3'>
            Cart
          </span>
          <span className='ml-1' id='cart_count'>
            2
          </span>
        </div>
      </nav>
    </Fragment>
  );
};

export default Header;

//搜索.js

mport React, { useState } from 'react';

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

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

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

  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;

//App.js

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

import Header from './components/layout/Header';
import Footer from './components/layout/Footer';

import Home from './components/Home';
import ProductDetails from './components/product/ProductDetails';

function App() {
  return (
    <Router>
      <div className='App'>
        <Header />
        <div className='container container-fluid'>
          <Routes>
            <Route path='/' element={<Home />} exact />
            <Route path='/search/:keyword' element={<Home />} />
            <Route path='/product/:id' element={<ProductDetails />} />
          </Routes>
        </div>
        <Footer />
      </div>
    </Router>
  );
}

export default App;

Answer 1

问题

您是对的，问题的原因是:

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

在 react-router-dom v6 中，Route 组件不再具有 component、render 或 children 函数 Prop 。旧的路线 Prop 也不再存在。 RRDv6 也不会公开 history 对象，而是使用 navigate 函数。

解决方案

由于 Search 是一个函数组件，您只需导入并使用 useNavigate Hook ，并将 history.push 替换为 navigate .

标题.js

<div className='col-12 col-md-6 mt-2 mt-md-0'>
  <Search />
</div>

搜索.js

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

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

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

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

  return (
    <form onSubmit={searchHandler}>
      ...
    </form>
  );
};