Question 219580 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to construct a dynamic route path with query parameters

I want to create a URL, something like this:
http://localhost:3000/boarding-school/delhi-ncr

but router.push() keeps on pushing dynamic URL and it’s generating something like this:
http://localhost:3000/boarding-school/boarding-school/boarding-school/delhi-ncr and I don’t want this, if somebody can help me please do it.

I want a URL like this at the end: http://localhost:3000/boarding-school/delhi-ncr?gender=male&somekey=value like this

I tried but did not figure out how to achieve that please help me

my code:

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);
  };
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Here is my solution after so many tries, By the way I am using Nextjs-13 stable version there is still some issues with query parameters it get cleared out upon selecting school type twice

    "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>

    I was trying to create custom URL, I am leaving this solution for the reference if some body need, any way, thanks whosoever answered my question.


  2. 0

    When the selectedSchools or selectedGender state changes, the useEffect hook will be triggered, and it will construct the URL path based on the selected school and add the gender query parameter if selectedGender is not empty. You can add additional query parameters in a similar way.

    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;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search