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

what `:search` mean, is it a query parameter or dynamic value? — Dharmik Patel, Mar 25 '22 at 07:59
Please include all relevant code you are working with. Where is the `Search` component rendered? What is the `Searched` component that is handling the `search` route path param? https://stackoverflow.com/help/minimal-reproducible-example — Drew Reese, Mar 25 '22 at 08:02
FWIW I'm unable to reproduce the issue as you describe in this running [condesandbox](https://codesandbox.io/s/use-navigate-function-not-working-react-livifv). — Drew Reese, Mar 25 '22 at 08:08
You see here :https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router — skipperhoa, Mar 25 '22 at 08:48
@DharmikPatel Thank you for your response. Yes it is a dynamic value for the search input. I might not be doing it the best way and I'm open to suggestions. Thank you again — ddboy19912, Mar 25 '22 at 15:31
@DharmikPatel `":search"` is a route path parameter, nothing to do with queryString parameters. It's meant to be dynamic for dynamic path matching. In other words, whatever the value is in the URL path for *that* segment, it will be assigned to a route param named `search`. — Drew Reese, Mar 25 '22 at 17:29
Were you able to check my sandbox to see what may be different from your actual code? Feel free to fork my sandbox and add in more of your code to make it a more accurate facsimile until it reproduces the issue, if it does. — Drew Reese, Mar 25 '22 at 17:32
@DrewReese Thank you for your response. Yeah I did and it works perfectly but I'm trying to figure out how to implement into my program. Did my code not work because I didn't add useParams for the search value ? — ddboy19912, Mar 25 '22 at 17:45
Dunno since I can't see the `Searched` component rendered on the `path='/searched/:search'` route, but perhaps yes, since you'd need to use the `useParams` hook *somewhere* to access the route params. — Drew Reese, Mar 25 '22 at 17:58
@DrewReese https://github.com/ddboy19912/Deliciso-React-.git — ddboy19912, Mar 25 '22 at 18:04
Ok, I've forked your repo into a [codesandbox](https://codesandbox.io/s/musing-dewdney-9vp3rl?file=/src/components/Search.jsx). What are the exact steps to reproduce the issue? The `Search` component appears to also have the same issue I found in your snippet above where the form needs to be a styled `form` element instead of a `div` so the form submission works. — Drew Reese, Mar 25 '22 at 18:09
@DrewReese Hey, I've update the code on github but the search input is still not working. When I search a name like cookies. It is supposed to take me to http://localhost:3000/searched/cookies but it does nothing when I press 'Enter'. but when I add the /searched/cookies from the homepage it does what its supposed to do and displays all the relevant cookie searches from the API. — ddboy19912, Mar 26 '22 at 10:42
I don't know what you changed in your repo, but your code still has the same issue... the form needs to be a styled `form` element instead of a `div` so the form submission works. — Drew Reese, Mar 28 '22 at 16:49

score 1 · Accepted Answer · answered Mar 30 '22 at 05:50

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;

Use Navigate function not working (React)

1 Answers1