javascript 搜索栏电子商务MERN堆栈

pnwntuvh 于 2023-05-05 发布在 Java

关注(0)|答案(1)|浏览(105)

我从udemy的视频和使用MERN堆栈制作一个网站。
在视频中（Header.js）

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

我做了同样的事情，但由于错误，我不得不将其 Package 在Routes中
这就是App.js

<Routes>
  <Route path="/search/:keyword" component={Home} />
  <Route path="/" element={<Search />} />
</Routes>

和Search.js

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}>
      <input type="text" onChange={(e) => setKeyword(e.target.value)} />
      <button type="submit">Search</button>
    </form>
  );
};

在视频中，一切正常，但当我这样做时，搜索栏消失了。
如果我按照聊天GPT与代码一样
删除component并将其替换为element，从header.js代码中删除history，它显示搜索栏，但表示history未定义。

JavaScript

来源：https://stackoverflow.com/questions/76152695/search-bar-e-commerce-mern-stack

1条答案

按热度按时间

svmlkihl1#

react-router-dom@6删除了RRDv5中存在的路由属性。你现在应该使用React钩子。useNavigate钩子取代了RRDv5 useHistory钩子。

import { useNavigate } from 'react-router-dom';

const Search = () => {
  const navigate = useNavigate();

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

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

    navigate(keyword.trim() ? `/search/${keyword}` : "/");
  };

  return (
    <form onSubmit={searchHandler}>
      <input type="text" onChange={(e) => setKeyword(e.target.value)} />
      <button type="submit">Search</button>
    </form>
  );
};

赞(0）回复(0）举报 2023-05-05

我来回答

javascript 搜索栏电子商务MERN堆栈

1条答案

相关问题

热门标签

最新问答