每当有人直接使用next.js访问它时，如何使查询字符串URL可行？

Question

在这里，我在下一个网站上有一个搜索栏。每当我在搜索栏中键入查询（例如德里）并按下提交按钮时，API呼叫运行，然后将其推到http：// localhost：3000/jobs/jobs/job-search/search/seacter-jobs？title = = ％20delhi，基于此查询显示的结果。但是，当我复制此链接并将其直接粘贴到浏览器中时，结果未显示。我不知道为什么，我没有任何想法使此功能有效。请帮助解决此问题。下面给出了一些代码。

过滤搜索

import React,{useState,useEffect} from 'react';
import router from 'next/router';

const FilterSearch = ({fRoute}) => {
    
const [search,setSearch]=useState(" ");
const changeText=(e)=>{
    setSearch(e.target.value);
}

const submitHandle=async (e)=>{
    e.preventDefault();
    router.push(`/${fRoute}/job-search/related-jobs?title=${search}`);

}


return(
    <>
    <form className='flex' onSubmit={submitHandle}>
        <input type="search"  onChange={changeText} className='p-4 w-[70%] mx-3 ring-1 ring-teal-500 rounded-lg shadow-lg shadow-teal-400' placeholder='Search' />
        <button className='px-2 bg-red-500 rounded-md 'type='submit'>Search Job</button> 
    </form>
    </>

)

}
export default FilterSearch;

结果页面组件

import React,{useState,useEffect} from 'react';
import {useRouter} from 'next/router';
import {API} from '../../config';
import Card from '../jobs/Card'


const SearchedJobs = ({xRoute}) => {
    const [data,setData]=useState([]);
    const router=useRouter();
    const {title}=router.query;

    useEffect(async ()=>{
    
        const fetchData= async ()=> {
            const searchData=await fetch(`${API}/${xRoute}/filter/${title}`).then(res=>res.json());

            setData(searchData);
            
        }
        fetchData();
    
    },[]);

  return (
      <>
   <h1 className='pt-20 my-2 text-lg font-bold  lg:px-60'>Jobs Related to, {title}</h1>
    <div className='flex flex-col p-4 lg:grid lg:grid-cols-2 lg:px-60'>
        {data.map((j,i)=>{
            return(
                <article className="m-1 mb-5 rounded-md shadow-md shadow-green-400 hover:ring-slate-900 hover:ring-1" key={i}>
                <Card job={j} />
                </article>

            )

        })}
    </div>
      </>
 
  )
}

export default SearchedJobs

卡片不过是显示结果的模板，因此不必担心

Answer 1

当组件加载时，查询参数不正确，因为路由器挂钩仍在加载，但是当组件可用时，它会重新呈现该组件。

使其正常工作的一种方法是编辑useffect挂钩

useEffect(async ()=>{
  if (!title) return;

  const fetchData= async ()=> {
    const searchData=await 
      fetch(`${API}/${xRoute}/filter/${title}`).then(res=>res.json());

    setData(searchData);         
  }
  fetchData();
    
}, [title]);

通知我在useffect依赖项阵列中添加了title，以便每次> code> title更改，它将撤离数据