{"id":11059,"date":"2024-08-06T04:48:51","date_gmt":"2024-08-06T04:48:51","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=11059"},"modified":"2024-08-06T04:48:51","modified_gmt":"2024-08-06T04:48:51","slug":"pagination-issues-in-react-router-dom","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/react\/pagination-issues-in-react-router-dom","title":{"rendered":"Pagination is not working properly using React-Router DOM"},"content":{"rendered":"<p>Below solution will ensure that the URL changes when arrayIndex is updated, reflecting the current path<\/p>\n<h3>Key points:<\/h3>\n<ul>\n<li>useEffect triggers navigation to the new path whenever arrayIndex changes.<\/li>\n<li>handleNext and handlePrev update arrayIndex accordingly.<\/li>\n<li>navigate is used to programmatically change the route.<\/li>\n<\/ul>\n<p>This should solve the issue and provide smooth navigation between the paths.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"r\">import { useNavigate } from \"react-router-dom\";\r\nimport { useEffect, useState } from \"react\";\r\n\r\nconst Bottombar = () =&gt; {\r\n  const pathArray = [\"shop\", \"contact\", \"cart\"];\r\n  const [arrayIndex, setArrayIndex] = useState(0);\r\n  const navigate = useNavigate();\r\n\r\n  useEffect(() =&gt; {\r\n    navigate(`\/${pathArray[arrayIndex]}`);\r\n  }, [arrayIndex]);\r\n\r\n  const handleNext = () =&gt; {\r\n    if (arrayIndex === pathArray.length - 1) {\r\n      setArrayIndex(0);\r\n    } else {\r\n      setArrayIndex((prev) =&gt; prev + 1);\r\n    }\r\n  };\r\n  const handlePrev = () =&gt; {\r\n    if (arrayIndex === 0) {\r\n      setArrayIndex(pathArray.length - 1);\r\n    } else {\r\n      setArrayIndex((prev) =&gt; prev - 1);\r\n    }\r\n  };\r\n  return (\r\n    &lt;div className=\"bottombar\"&gt;\r\n      &lt;div className=\"links\"&gt;\r\n        &lt;button onClick={handlePrev}&gt;Previous&lt;\/button&gt;\r\n        &lt;button onClick={handleNext}&gt;Next&lt;\/button&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n  );\r\n};\r\nexport default Bottombar;\r\n<\/pre>\n<h3>Explanation<\/h3>\n<p><strong>1. State and Navigation:<\/strong> In the Home component, we define a state variable loading to track whether the new page is being preloaded. The useHistory hook allows us to navigate programmatically.<\/p>\n<p><strong>2. Preloading and Navigation:<\/strong> When the user clicks the link, the navigateToPage function is triggered. This function:<\/p>\n<ul>\n<li>Prevents the default link behavior.<\/li>\n<li>Sets the loading state to true to show the loading message.<\/li>\n<li>Preloads the Page component using await import(&#8220;.\/Page&#8221;).<\/li>\n<li>Resets the loading state to false.<\/li>\n<li>Uses history.push(&#8220;\/page&#8221;) to navigate to the new page.<\/li>\n<\/ul>\n<p><strong>3. Rendering:<\/strong> The App component sets up the routes using React Router. The home route renders the Home component. The \/page route uses React.Suspense with a null fallback, ensuring that the loading state is managed within the Home component rather than showing a separate loading message.<\/p>\n<p>This approach keeps the current page visible with a loading message until the new page is fully loaded, enhancing the user experience by providing a smooth transition between pages.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Below solution will ensure that the URL changes when arrayIndex is updated, reflecting the current path Key points: useEffect triggers navigation to the new path whenever arrayIndex changes. handleNext and handlePrev update arrayIndex accordingly. navigate is used to programmatically change the route. This should solve the issue and provide smooth navigation between the paths. import [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":11060,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-11059","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/11059"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=11059"}],"version-history":[{"count":2,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/11059\/revisions"}],"predecessor-version":[{"id":11062,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/11059\/revisions\/11062"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/11060"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=11059"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=11059"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=11059"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}