Use Navigate function not working (React)

Question

I'm following a tutorial and everything was going great until I tried to implement Navigation through a search input. For instance, If I am on http://localhost:3000/searched/profile. Typing out an input of 'names' in the search bar should take me to http://localhost:3000/searched/names. In the tutorial it worked that way and I believe I did the same thing but it doesn't work for me

First below is the Search component for the search bar and its input

And then the Pages where my routing is done. My Browser Router is in the App.js.

import styled from "styled-components"
import { FaSearch } from 'react-icons/fa'
import { useState } from 'react'
import {useNavigate} from 'react-router-dom'

function Search() {

  const [input, setInput] = useState('');
  const navigate = useNavigate();

  const submitHandler = (e) => {
    e.preventDefault();
    navigate('/searched/' + input) (I GUESS THIS IS WHAT IS NOT WORKING)
  };

  return (
    <FormStyle onSubmit={submitHandler}>
    <div>
    <FaSearch></FaSearch>
    <input onChange={(e) => setInput(e.target.value)} type="text" value={input}/>
    </div>
    <h1>{input}</h1>
    </FormStyle>
  )
}

const FormStyle = styled.div`
  margin: 0 20rem;

  div{
    width: 100%;
    position: relative;
  }
  input{
    border: none;
    background: linear-gradient(35deg, #494949, #313131);
    border-radius: 1rem;
    outline: none;
    font-size: 1.5rem;
    padding: 1rem 3rem;
    color: white;
    width: 100%;
  }
  svg{
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(100%, -50%);
    color: white;
  }
`

export default Search

Pages

import Home from "./Home"
import { Route, Routes } from 'react-router-dom'
import Cuisine from "./Cuisine"
import Searched from "./Searched"


function Pages() {

  return (
    <Routes>
      <Route path='/' element={<Home/>} />
      <Route path='/cuisine/:type' element={<Cuisine/>} />
      <Route path='/searched/:search'  element={<Searched/>} />
    </Routes>
  )
}

export default Pages

Answer 1

I know this is late but I had the same issue while following the same tutorial.

I found the issue wasn't on either of the pages you showed above. My issue was on the App.js page. I originally put the Search Component above my BrowserRouter. Once I moved it into the Browser Router component the error stopped and the pages worked as they should.

Answer 2

The FormStyle component is a styled div element instead of a form element, so the onSubmit handler is meaningless on the div. To resolve you should use the form element so the form submission works as you are expecting.

Search.js Example:

import styled from "styled-components";
import { FaSearch } from "react-icons/fa";
import { useState } from "react";
import { useNavigate } from "react-router-dom";

function Search() {
  const [input, setInput] = useState("");
  const navigate = useNavigate();

  const submitHandler = (e) => {
    e.preventDefault();
    navigate("/searched/" + input);
  };

  return (
    <FormStyle onSubmit={submitHandler}> // <-- (2) onSubmit works now
      <div>
        <FaSearch></FaSearch>
        <input
          onChange={(e) => setInput(e.target.value)}
          type="text"
          value={input}
        />
      </div>
      <h1>{input}</h1>
    </FormStyle>
  );
}

const FormStyle = styled.form` // <-- (1) switch to form element
  margin: 0 20rem;

  div {
    width: 100%;
    position: relative;
  }
  input {
    border: none;
    background: linear-gradient(35deg, #494949, #313131);
    border-radius: 1rem;
    outline: none;
    font-size: 1.5rem;
    padding: 1rem 3rem;
    color: white;
    width: 100%;
  }
  svg {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(100%, -50%);
    color: white;
  }
`;

export default Search;