Question 327773 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – useRouter only works when I reach my website's error page (NextJS)

Whenever a query is submitted in my search bar component, the current webpage doesn’t actually change, with only a /? showing up at the end of the website’s URL. However, when I manually type in an incorrect page route into the router (for example, /test), the search bar suddenly works as intended whenever I submit a query with it by pushing the query to the end of the URL path. Reloading the web page reintroduces the problem. For the component to be working correctly, it should be pushing /search?q=[QUERY HERE] to the router.

What’s going on? Is this a bug with NextJS or am I doing something incorrectly? For context, I’m using the App Router and this component is a layout component.

search-bar.tsx:

"use client";
import { useState } from "react";
import styles from "../app/styles/navbar.module.css"
import { useRouter, useSearchParams } from "next/navigation";

const SearchBar: React.FC = () => {
    const [query, setQuery] = useState("");
    const searchParams = useSearchParams();
    let router = useRouter();

    return (
        <form className={ styles.search } onSubmit={() => router.replace("/search?q=" + query)}>
            <input type="text" placeholder="Search here..." value={ query } onChange={(e) => setQuery(e.target.value)}/>
            <button type="submit" onClick={() => router.replace("/search?q=" + query)}>Search</button>
        </form>
    );
}

export default SearchBar;
Tags:

2

Answers


  1. 0

    Without knowing what your /search route does exactly I can not provide the best answer, but I think it could be the issue with replace and you could use router.push instead of router.replace to retain navigation history, so it can persist between reloads. Also, try using Link component that is provided by NextJS . You can wrap the form in Link component like this:

        <Link href="/search?q={query}" passHref>
      <form className={styles.search}>
        <input
          type="text"
          placeholder="Search here..."
          value={query}
          onChange={(e) => setQuery(e.target.value)}
        />
        <button type="submit">Search</button>
      </form>
    </Link>

    I hope this helps you, at least that is how I would do it, and it worked previously for me.

    Login or Signup to reply.
  2. 0

    Make sure you have the directory this way:

    app/search/page.tsx

    This is how the page component should be named Page

    "use client";
import React from "react";

const Page = () => {
  return <div className="Page">Look</div>;
};

export default Page;

    I also factored your searchBar component as so:

    "use client";
import { useState } from "react";
import styles from "../app/styles/navbar.module.css"
import { useRouter, useSearchParams } from "next/navigation";

const SearchBar: React.FC = () => {
    const [query, setQuery] = useState("");
    const searchParams = useSearchParams();
    const router = useRouter();

    const handleSubmit =()=> {
        router.replace("/search?q=" + query)
    }

    return (
        <form className={ styles.search } onSubmit={handleSubmit}>
            <input type="text" placeholder="Search here..." value={ query } onChange={(e) => setQuery(e.target.value)}/>
            <button type="submit">Search</button>
        </form>
    );
}

export default SearchBar;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search