我想创建一个URL，如下所示： http://localhost:3000/boarding-school/delhi-ncr
但是 router.push() 继续推送动态 URL 并且它生成如下内容： http://localhost:3000/boarding-school/boarding-school/boarding-school/delhi-ncr，我不想要这个，如果有人可以帮助我，请这样做。
我想要一个像这样的URL在最后：http://localhost:3000/boarding-school/delhi-ncr?gender=male&somekey=value 这样
我尝试过，但不知道如何实现，请帮助我
我的代码：
import Layout from "../../../component/Layout/layout";
import { useSearchParams, useRouter, usePathname } from "next/navigation";
import Image from "next/image";
import { useEffect, useState } from "react";
const Listing = ({ params }) => {
const router = useRouter();
const pathname = usePathname();
console.log("The Parmas", params);
console.log("the router", router);
// console.log("pathanme", pathname);
// const searchParams = useSearchParams();
// console.log(searchParams);
/******** API data **********/
const [instituteData, setInstituteData] = useState([]);
const [genderData, setGenderData] = useState([]);
const [boardData, setBoardData] = useState([]);
const [schoolData, setSchoolData] = useState([]);
const [budgetData, setBudgetData] = useState([]);
/******************/
/* ************ Filter Data ***********/
const [selectedGender, setSelectedGender] = useState("");
const [selectedBudget, setSelectedBudget] = useState("");
const [selectedBoard, setSelectedBoard] = useState("");
const [selectedSchools, setSelectedSchools] = useState("");
useEffect(() => {
let urlSegment = `/${selectedSchools}${pathname}`;
if (selectedSchools) {
router.push(urlSegment);
}
if (selectedGender) {
// const genderUrl = (urlSegment += `?gender=${selectedGender}`);
// router.push(genderUrl);
}
}, [selectedSchools, selectedGender, router]);
const appendSchoolNameToCurrentRoute = (event) => {
const { name, value, checked } = event.target;
setSelectedSchools(name);
};
当selectedSchools或selectedGender状态发生变化时，会触发useEffect钩子，如果selectedGender不为空，则会根据选择的学校构造URL路径，并添加性别查询参数。您可以以类似的方式添加其他查询参数。
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
const Listing = () => {
const router = useRouter();
const { pathname, query } = router;
// Your state and API data handling code here
// Your state and filter data handling code here
/******************/
useEffect(() => {
// Create the URL path based on the selectedSchools state
let urlPath = `/boarding-school/${selectedSchools}`;
// Create the query parameters object
const queryParams = {};
// Add selectedGender as a query parameter if it is not empty
if (selectedGender) {
queryParams.gender = selectedGender;
}
// Add other query parameters as needed
// queryParams.somekey = 'value';
// Use router.push() to navigate to the desired URL with query parameters
router.push({
pathname: urlPath,
query: queryParams,
});
}, [selectedSchools, selectedGender, router]);
// Rest of your component code here
// ...
return (
// Your JSX code here
// ...
);
};
export default Listing;
这是我经过多次尝试后的解决方案， 顺便说一句，我使用的是 Nextjs-13 稳定版 查询参数仍然存在一些问题，在选择学校类型两次后会被清除
"use client";
import "../Style/common-listing.css";
import "../Style/all.css";
import "../Style/bootstrap.css";
import { imageLoader } from "../../../component/Layout/utils";
import "../../../node_modules/bootstrap/dist/css/bootstrap.min.css";
import Layout from "../../../component/Layout/layout";
import { useSearchParams, useRouter, usePathname } from "next/navigation";
import Image from "next/image";
import { useEffect, useState } from "react";
const Listing = ({ params }) => {
const router = useRouter();
const pathname = usePathname();
console.log("The Parmas", params);
console.log("pathanme", pathname);
const getPathLength = pathname.split("/").filter(Boolean).length;
const firstPath = pathname.split("/").filter(Boolean)[0];
const secondPath = pathname.split("/").filter(Boolean)[getPathLength - 1];
const searchParams = useSearchParams();
console.log("The search params", searchParams.get("gender"));
/******** API data **********/
const [instituteData, setInstituteData] = useState([]);
const [genderData, setGenderData] = useState([]);
const [boardData, setBoardData] = useState([]);
const [schoolData, setSchoolData] = useState([]);
const [budgetData, setBudgetData] = useState([]);
/******************/
/* ************ Filter Data ***********/
const [selectedGender, setSelectedGender] = useState("");
const [selectedBudget, setSelectedBudget] = useState("");
const [selectedBoard, setSelectedBoard] = useState("");
const [selectedSchools, setSelectedSchools] = useState("");
let urlSegment = ""; // generate a Url segments
useEffect(() => {
console.log("here is the pathname", pathname);
if (selectedSchools) {
urlSegment = `/${selectedSchools}/${secondPath}`;
router.replace(urlSegment);
}
if (selectedGender) {
const genderUrl = (urlSegment += `?classification=${selectedGender}`);
router.replace(genderUrl);
}
}, [selectedSchools, selectedGender, router]);
const appendSchoolNameToCurrentRoute = (event) => {
const { name, value, checked } = event.target;
setSelectedSchools(name);
};
/********************/
/********** fetching api data************ */
useEffect(() => {
async function getInstitute() {
const res = await fetch("http://127.0.0.1:1337/api/schools?populate=*");
const { data, meta } = await res.json();
setInstituteData(data);
console.log("The data.........", data, meta);
}
async function getGenders() {
const res = await fetch("http://localhost:1337/api/genders");
const { data, meta } = await res.json();
setGenderData(data);
console.log("The data.........", data, meta);
}
async function getBoards() {
const res = await fetch("http://localhost:1337/api/boards");
const { data, meta } = await res.json();
setBoardData(data);
console.log("The data.........", data, meta);
}
async function getSchools() {
const res = await fetch("http://localhost:1337/api/categories");
const { data, meta } = await res.json();
setSchoolData(data);
console.log("The data.........", data, meta);
}
async function getBudgets() {
const res = await fetch("http://localhost:1337/api/budgets");
const { data, meta } = await res.json();
setBudgetData(data);
console.log("The data.........", data, meta);
}
getInstitute();
getGenders();
getBoards();
getSchools();
getBudgets();
}, []);
return (
<Layout>
<section className="CollaborationBg padding-80">
<div className="inner-container">
<h2>Team Collaboration Softwares</h2>
<p className="desktopview">
Project management is there in every industry and every function.
Whether you are managing your very first project, or just looking to
improvise your existing pattern, then the following list of best
project management tools will help you define your project goals
more smartly and achieve them efhtmlFortlessly. Investing in a
comprehensive project tracking software will help an organization to
strategize all-important projects from inception till completion.
</p>
</div>
</section>
<section className="softwareBlock padding-80">
<div className="inner-container">
<div className="innerBlock">
<div className="menu-list" role="navigation">
<div className="left_filterBlock">
<div className="pricingblock">
<h5>Classification</h5>
{genderData.map((gender) => (
<div className="checkboxz">
<input
type="checkbox"
name={gender.attributes.gender_type}
id={gender.attributes.gender_type}
className="css-checkbox"
// checked="checked"
onChange={(e) => setSelectedGender(e.target.name)}
/>
<label
htmlFor={gender.attributes.gender_type}
className="css-label"
>
{gender.attributes.gender_type}
</label>
</div>
))}
{/* <div className="checkboxz">
<input
type="checkbox"
name="checkboxG2"
id="checkboxG2"
className="css-checkbox"
/>
<label htmlFor="checkboxG2" className="css-label">
girls
</label>
</div>
<div className="checkboxz">
<input
type="checkbox"
name="checkboxG3"
id="checkboxG3"
className="css-checkbox"
/>
<label htmlFor="checkboxG3" className="css-label">
boys
</label>
</div> */}
</div>
<div className="pricingblock">
<h5>Board</h5>
{boardData.map((board) => (
<div className="checkboxz">
<input
type="checkbox"
name={board.attributes.slug}
id={board.attributes.slug}
className="css-checkbox"
checked="checked"
/>
<label
htmlFor={board.attributes.slug}
className="css-label"
>
{board.attributes.name}
</label>
</div>
))}
{/* <div className="checkboxz">
<input
type="checkbox"
name="checkboxG5"
id="checkboxG6"
className="css-checkbox"
/>
<label htmlFor="checkboxG6" className="css-label">
IB
</label>
</div>
<div className="checkboxz">
<input
type="checkbox"
name="checkboxG3"
id="checkboxG7"
className="css-checkbox"
/>
<label htmlFor="checkboxG7" className="css-label">
ICSE & ISC
</label>
</div>
<div className="checkboxz">
<input
type="checkbox"
name="checkboxG4"
id="checkboxG8"
className="css-checkbox"
/>
<label htmlFor="checkboxG8" className="css-label">
IGCSE & CIE
</label>
</div>
<div className="checkboxz">
<input
type="checkbox"
name="checkboxG4"
id="checkboxG9"
className="css-checkbox"
/>
<label htmlFor="checkboxG9" className="css-label">
Others
</label>
</div> */}
</div>
{/* School category */}
<div className="pricingblock">
<h5>School Category</h5>
{schoolData.map((school) => (
<div className="checkboxz">
<input
type="checkbox"
name={school.attributes.slug}
id={school.attributes.slug}
className="css-checkbox"
onChange={appendSchoolNameToCurrentRoute}
/>
<label
htmlFor={school.attributes.slug}
className="css-label"
>
{school.attributes.name}
</label>
</div>
))}
</div>
我正在尝试创建自定义 URL，如果有人需要，我将将此解决方案留给参考，无论如何，感谢回答我问题的人。