如何将搜索查询附加到React中的搜索页面上的URL？

Question

我的标题搜索栏可通过导航到“搜索？q =”按钮按下按钮，从搜索页面的URL读取参数并处理它们，但是当我从搜索页面搜索时，URL采用此表单“搜索/搜索？q = q = ”。在这种情况下，如何跳过额外的“搜索”？

我尝试了这个解决方案，但它不起作用

import React, { useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import './style.css'

function SearchBar() {
    const navigate = useNavigate();
    const location = useLocation();
    const [input, setInput] = useState('hi');
    const search = () =>{
        const path = location.pathname
        if(path.includes('search'))
            navigate('?q='+input)
        else
            navigate('search?q=' + input)
    }
    return (
        <form class="form-inline">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"  onChange={e=>{setInput(e.target.value)}}/>
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit" onClick={search}>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
                </svg>
            </button>
        </form>
    )
}

export default SearchBar

Answer 1

这样更改您的代码。我在表单标签上添加了onsubmit。并在search（）中进行了一些更改。

另外，我添加了使用效率来从URL获取参数。

import React, { useEffect, useState } from "react";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import './style.css'

function SearchBar() {
  const navigate = useNavigate();
  const location = useLocation();
  const params = useParams();
  const [input, setInput] = useState("hi");

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

    const path = location.pathname;

    if (path === "/search") {
      navigate("?q=" + input);
    } else {
      navigate("search?q=" + input);
    }
  };

  useEffect(() => {
    const param = new URL(window.location.href).searchParams.get("q");
    if (param) console.log(param);
  }, [params]);

  return (
    <form className="form-inline" onSubmit={search}>
      <input
        className="form-control mr-sm-2"
        type="search"
        placeholder="Search"
        aria-label="Search"
        onChange={(e) => {
          setInput(e.target.value);
        }}
      />
      <button className="btn btn-outline-success my-2 my-sm-0" type="submit">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
          fill="currentColor"
          className="bi bi-search"
          viewBox="0 0 16 16"
        >
          <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
        </svg>
      </button>
    </form>
  );
}

export default SearchBar;