我不断收到“useNavigate() 只能在<router> component" 运行时出错，我不确定为什么</router>

Question

import SearchIcon from '@material-ui/icons/Search';
import MicIcon from '@material-ui/icons/Mic';
import {Button} from '@material-ui/core';
import styled from 'styled-components';
//import {Search} from '@material-ui/icons';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useStateValue } from '../SearchProvider.js';
import { SET_SEARCH_TERM } from '../types.js';
import React from 'react';

const SearchInput = styled.div`
  display: flex;
  align-items: center;
  border: 1px solid lightgray;
  height 30px;
  padding: 10px 15px;
  width: 500px;
  margin: 0px auto;
  border-radius: 999px;
  input {
    flex: 1;
    padding: 8px 13px;
    font-size: medium;
    border: 0;
    outline: 0;
  }
  .searchicon {
    color: gray;
  }
`;

const SearchButton = styled.div`
  margin-top: 20px;
  display: flex;
  justify-content: center;
  button {
    margin: 5px;
    background: #f8f8f8 !important;
    border: 1px solid white;
    text-transform: inherit;
    &:hover {
      margin: 5px;
      background: #f8f8f8 !important;
      color: #000;
      border: 1px solid #c6c6c6
    }
  }
`;

const Search = ({ hide }) => {
  const [input, setInput] = useState("");
  const navigate = useNavigate();
  const[{}, dispatch] = useStateValue(); 

  const search = e => {
    e.preventDefault();
    dispatch({
      type: SET_SEARCH_TERM,
      term: input
    })
    console.log(input);
    navigate.push("/search");
  };

  return (
    <form onSubmit={search}>
      <SearchInput>
        <SearchIcon className="searchicon" />
        <input value={input} onChange={e => setInput(e.target.value)} />
        <MicIcon />
      </SearchInput>
      {!hide && (
        <SearchButton>
          <Button type="submit" variant="outlined">Google Search</Button>
          <Button variant="outlined">I am feeling lucky</Button>
        </SearchButton>
      )}
    </form>
  )
};

export default Search

I am trying to make a google clone but I am getting errors in my console saying "Uncaught Error: useNavigate() may be used only in the context of a component" and i'm not sure what else to do. Says the error is coming in the "const navigate = useNavigate();" line. I have tried using "Navigate" and "useHistory" as well but those are working either.

Answer 1

A react-router or react-router-dom router component provides the routing context that all routes, links, hooks, etc use. The Search component needs to be rendered within router so the useNavigate hook has a routing context available to it.

Example:

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Search from '../components/Search';

...

const App = () => {
  ...

  return (
    <BrowserRouter> // <-- Provides routing context
      <div>
        ...
        <Search /> // <-- rendered within Router component
      </div>
      <Routes>
        .... app routes ...
      </Routes>

      ...

    </BrowserRouter>
  );
};

Also, just FYI, navigate is a function , not an object like history that was used in previous versions. Use navigate("/search"); instead of navigate.push("/search"); to issue an imperative navigation action.