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

Question

我的 next.js 网站上有一个搜索栏。每当我在搜索栏中键入查询（例如 delhi）并点击提交按钮时，都会运行 api 调用并将其推送到 http://localhost:3000/jobs/job-search/related-jobs?title=%20delhi，其中显示基于此查询的结果。但是当我复制这个 link 并直接粘贴到浏览器中时，结果没有显示。我不知道为什么，我也不知道如何让这个功能 work.Please 帮助解决这个问题 problem.Some 下面给出了代码。

过滤搜索

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

查询参数在组件加载时不可用，因为路由器挂钩仍在加载，但它 re-renders 组件可用时。

使其工作的一种方法是编辑 useEffect 挂钩

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

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

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

请注意，我在 useEffect 依赖数组中添加了 title，这样每次 title 更改时，它都会重新获取数据

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

how to make query string url workable whenever someone visits on it directly using next.js?

node.js

query-string

reactjs

next.js