{"id":15049,"date":"2024-03-15T10:23:26","date_gmt":"2024-03-15T10:23:26","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-page-switching-when-sliding-in-react\/"},"modified":"2025-08-06T15:19:16","modified_gmt":"2025-08-06T15:19:16","slug":"how-to-achieve-page-switching-when-sliding-in-react","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-page-switching-when-sliding-in-react\/","title":{"rendered":"How to achieve page switching when sliding in React?"},"content":{"rendered":"<p>To achieve page sliding in React, you can use React&#8217;s event handling and CSS transition effects. Here is a simple example:<\/p>\n<ol>\n<li>First, you need to set a state in the React component to track the current page index.<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-title class_\">React<\/span>, { useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\r\n\r\n<span class=\"hljs-keyword\">const<\/span> <span class=\"hljs-title function_\">App<\/span> = (<span class=\"hljs-params\"><\/span>) =&gt; {\r\n  <span class=\"hljs-keyword\">const<\/span> [currentPage, setCurrentPage] = <span class=\"hljs-title function_\">useState<\/span>(<span class=\"hljs-number\">0<\/span>);\r\n\r\n  <span class=\"hljs-comment\">\/\/ ...<\/span>\r\n\r\n  <span class=\"hljs-keyword\">return<\/span> (\r\n    <span class=\"language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\r\n      {\/* \u9875\u9762\u5185\u5bb9 *\/}\r\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\r\n  );\r\n};\r\n\r\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-title class_\">App<\/span>;\r\n<\/code><\/pre>\n<ol>\n<li>beginning to touch<\/li>\n<li>dragging a finger across a touch screen<\/li>\n<li>end of touch action<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-title class_\">React<\/span>, { useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\r\n\r\n<span class=\"hljs-keyword\">const<\/span> <span class=\"hljs-title function_\">App<\/span> = (<span class=\"hljs-params\"><\/span>) =&gt; {\r\n  <span class=\"hljs-keyword\">const<\/span> [currentPage, setCurrentPage] = <span class=\"hljs-title function_\">useState<\/span>(<span class=\"hljs-number\">0<\/span>);\r\n\r\n  <span class=\"hljs-keyword\">const<\/span> <span class=\"hljs-title function_\">handleTouchStart<\/span> = (<span class=\"hljs-params\">e<\/span>) =&gt; {\r\n    <span class=\"hljs-comment\">\/\/ \u8bb0\u5f55\u6ed1\u52a8\u5f00\u59cb\u65f6\u7684\u89e6\u6478\u4f4d\u7f6e<\/span>\r\n  };\r\n\r\n  <span class=\"hljs-keyword\">const<\/span> <span class=\"hljs-title function_\">handleTouchMove<\/span> = (<span class=\"hljs-params\">e<\/span>) =&gt; {\r\n    <span class=\"hljs-comment\">\/\/ \u8ba1\u7b97\u6ed1\u52a8\u7684\u8ddd\u79bb<\/span>\r\n    <span class=\"hljs-comment\">\/\/ \u6839\u636e\u6ed1\u52a8\u8ddd\u79bb\u6765\u5224\u65ad\u662f\u5426\u5207\u6362\u9875\u9762<\/span>\r\n  };\r\n\r\n  <span class=\"hljs-keyword\">const<\/span> <span class=\"hljs-title function_\">handleTouchEnd<\/span> = (<span class=\"hljs-params\">e<\/span>) =&gt; {\r\n    <span class=\"hljs-comment\">\/\/ \u6e05\u9664\u89e6\u6478\u4f4d\u7f6e\u8bb0\u5f55<\/span>\r\n  };\r\n\r\n  <span class=\"hljs-keyword\">return<\/span> (\r\n    <span class=\"language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>\r\n      <span class=\"hljs-attr\">onTouchStart<\/span>=<span class=\"hljs-string\">{handleTouchStart}<\/span>\r\n      <span class=\"hljs-attr\">onTouchMove<\/span>=<span class=\"hljs-string\">{handleTouchMove}<\/span>\r\n      <span class=\"hljs-attr\">onTouchEnd<\/span>=<span class=\"hljs-string\">{handleTouchEnd}<\/span>\r\n    &gt;<\/span>\r\n      {\/* \u9875\u9762\u5185\u5bb9 *\/}\r\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\r\n  );\r\n};\r\n\r\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-title class_\">App<\/span>;\r\n<\/code><\/pre>\n<ol>\n<li>change<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-title class_\">React<\/span>, { useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\r\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">\".\/App.css\"<\/span>;\r\n\r\n<span class=\"hljs-keyword\">const<\/span> <span class=\"hljs-title function_\">App<\/span> = (<span class=\"hljs-params\"><\/span>) =&gt; {\r\n  <span class=\"hljs-keyword\">const<\/span> [currentPage, setCurrentPage] = <span class=\"hljs-title function_\">useState<\/span>(<span class=\"hljs-number\">0<\/span>);\r\n\r\n  <span class=\"hljs-keyword\">const<\/span> <span class=\"hljs-title function_\">handleTouchStart<\/span> = (<span class=\"hljs-params\">e<\/span>) =&gt; {\r\n    <span class=\"hljs-comment\">\/\/ \u8bb0\u5f55\u6ed1\u52a8\u5f00\u59cb\u65f6\u7684\u89e6\u6478\u4f4d\u7f6e<\/span>\r\n  };\r\n\r\n  <span class=\"hljs-keyword\">const<\/span> <span class=\"hljs-title function_\">handleTouchMove<\/span> = (<span class=\"hljs-params\">e<\/span>) =&gt; {\r\n    <span class=\"hljs-comment\">\/\/ \u8ba1\u7b97\u6ed1\u52a8\u7684\u8ddd\u79bb<\/span>\r\n    <span class=\"hljs-comment\">\/\/ \u6839\u636e\u6ed1\u52a8\u8ddd\u79bb\u6765\u5224\u65ad\u662f\u5426\u5207\u6362\u9875\u9762<\/span>\r\n  };\r\n\r\n  <span class=\"hljs-keyword\">const<\/span> <span class=\"hljs-title function_\">handleTouchEnd<\/span> = (<span class=\"hljs-params\">e<\/span>) =&gt; {\r\n    <span class=\"hljs-comment\">\/\/ \u6e05\u9664\u89e6\u6478\u4f4d\u7f6e\u8bb0\u5f55<\/span>\r\n  };\r\n\r\n  <span class=\"hljs-keyword\">return<\/span> (\r\n    <span class=\"language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>\r\n      <span class=\"hljs-attr\">onTouchStart<\/span>=<span class=\"hljs-string\">{handleTouchStart}<\/span>\r\n      <span class=\"hljs-attr\">onTouchMove<\/span>=<span class=\"hljs-string\">{handleTouchMove}<\/span>\r\n      <span class=\"hljs-attr\">onTouchEnd<\/span>=<span class=\"hljs-string\">{handleTouchEnd}<\/span>\r\n      <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"slider-container\"<\/span>\r\n      <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{{<\/span>\r\n        <span class=\"hljs-attr\">transform:<\/span> `<span class=\"hljs-attr\">translateX<\/span>(<span class=\"hljs-attr\">-<\/span>${<span class=\"hljs-attr\">currentPage<\/span> * <span class=\"hljs-attr\">100<\/span>}%)`,\r\n        <span class=\"hljs-attr\">transition:<\/span> \"<span class=\"hljs-attr\">transform<\/span> <span class=\"hljs-attr\">0.3s<\/span> <span class=\"hljs-attr\">ease-in-out<\/span>\",\r\n      }}\r\n    &gt;<\/span>\r\n      {\/* \u7b2c\u4e00\u9875 *\/}\r\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"page\"<\/span>&gt;<\/span>Page 1<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\r\n      {\/* \u7b2c\u4e8c\u9875 *\/}\r\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"page\"<\/span>&gt;<\/span>Page 2<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\r\n      {\/* \u7b2c\u4e09\u9875 *\/}\r\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"page\"<\/span>&gt;<\/span>Page 3<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\r\n  );\r\n};\r\n\r\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-title class_\">App<\/span>;\r\n<\/code><\/pre>\n<ol>\n<li>Finally, you need to add some CSS styles to define the page container and the styles of the page, as well as the styles for transition effects.<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><span class=\"hljs-selector-class\">.slider-container<\/span> {\r\n  <span class=\"hljs-attribute\">display<\/span>: flex;\r\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">300%<\/span>;\r\n}\r\n\r\n<span class=\"hljs-selector-class\">.page<\/span> {\r\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">33.33%<\/span>;\r\n}\r\n\r\n<span class=\"hljs-selector-class\">.page<\/span><span class=\"hljs-selector-pseudo\">:nth-child<\/span>(<span class=\"hljs-number\">1<\/span>) {\r\n  <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#ff0000<\/span>;\r\n}\r\n\r\n<span class=\"hljs-selector-class\">.page<\/span><span class=\"hljs-selector-pseudo\">:nth-child<\/span>(<span class=\"hljs-number\">2<\/span>) {\r\n  <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#00ff00<\/span>;\r\n}\r\n\r\n<span class=\"hljs-selector-class\">.page<\/span><span class=\"hljs-selector-pseudo\">:nth-child<\/span>(<span class=\"hljs-number\">3<\/span>) {\r\n  <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#0000ff<\/span>;\r\n}\r\n<\/code><\/pre>\n<p>By following the steps above, you can achieve the effect of sliding between pages in React. As the user slides on the screen, the pages will switch based on the distance of the slide, and a transition effect will be added to make the switching smoother.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To achieve page sliding in React, you can use React&#8217;s event handling and CSS transition effects. Here is a simple example: First, you need to set a state in the React component to track the current page index. import React, { useState } from &#8220;react&#8221;; const App = () =&gt; { const [currentPage, setCurrentPage] = [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[453,1402,299,1404,1403],"class_list":["post-15049","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-development","tag-guide","tag-programming","tag-technology","tag-tutorial"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to achieve page switching when sliding in React? - Blog - Silicon Cloud<\/title>\n<meta name=\"description\" content=\"Learn about how to achieve page switching when sliding in react?. Comprehensive guide with examples and best practices.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-page-switching-when-sliding-in-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to achieve page switching when sliding in React?\" \/>\n<meta property=\"og:description\" content=\"Learn about how to achieve page switching when sliding in react?. Comprehensive guide with examples and best practices.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-page-switching-when-sliding-in-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-15T10:23:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-06T15:19:16+00:00\" \/>\n<meta name=\"author\" content=\"Jackson Davis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jackson Davis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-page-switching-when-sliding-in-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-page-switching-when-sliding-in-react\/\"},\"author\":{\"name\":\"Jackson Davis\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/55a10b8b0457c35884c25677889ad350\"},\"headline\":\"How to achieve page switching when sliding in React?\",\"datePublished\":\"2024-03-15T10:23:26+00:00\",\"dateModified\":\"2025-08-06T15:19:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-page-switching-when-sliding-in-react\/\"},\"wordCount\":136,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"keywords\":[\"Development\",\"guide\",\"programming\",\"technology\",\"tutorial\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-page-switching-when-sliding-in-react\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-page-switching-when-sliding-in-react\/\",\"name\":\"How to achieve page switching when sliding in React? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T10:23:26+00:00\",\"dateModified\":\"2025-08-06T15:19:16+00:00\",\"description\":\"Learn about how to achieve page switching when sliding in react?. Comprehensive guide with examples and best practices.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-page-switching-when-sliding-in-react\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-page-switching-when-sliding-in-react\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-page-switching-when-sliding-in-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to achieve page switching when sliding in React?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/55a10b8b0457c35884c25677889ad350\",\"name\":\"Jackson Davis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2fdb47d6df1226e92380d96973782572a97b0675d098bb914410dec348eb5d29?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2fdb47d6df1226e92380d96973782572a97b0675d098bb914410dec348eb5d29?s=96&d=mm&r=g\",\"caption\":\"Jackson Davis\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/jacksondavis\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to achieve page switching when sliding in React? - Blog - Silicon Cloud","description":"Learn about how to achieve page switching when sliding in react?. Comprehensive guide with examples and best practices.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-page-switching-when-sliding-in-react\/","og_locale":"en_US","og_type":"article","og_title":"How to achieve page switching when sliding in React?","og_description":"Learn about how to achieve page switching when sliding in react?. Comprehensive guide with examples and best practices.","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-page-switching-when-sliding-in-react\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T10:23:26+00:00","article_modified_time":"2025-08-06T15:19:16+00:00","author":"Jackson Davis","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Jackson Davis","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-page-switching-when-sliding-in-react\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-page-switching-when-sliding-in-react\/"},"author":{"name":"Jackson Davis","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/55a10b8b0457c35884c25677889ad350"},"headline":"How to achieve page switching when sliding in React?","datePublished":"2024-03-15T10:23:26+00:00","dateModified":"2025-08-06T15:19:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-page-switching-when-sliding-in-react\/"},"wordCount":136,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"keywords":["Development","guide","programming","technology","tutorial"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-page-switching-when-sliding-in-react\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-page-switching-when-sliding-in-react\/","name":"How to achieve page switching when sliding in React? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T10:23:26+00:00","dateModified":"2025-08-06T15:19:16+00:00","description":"Learn about how to achieve page switching when sliding in react?. Comprehensive guide with examples and best practices.","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-page-switching-when-sliding-in-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-achieve-page-switching-when-sliding-in-react\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-page-switching-when-sliding-in-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to achieve page switching when sliding in React?"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/55a10b8b0457c35884c25677889ad350","name":"Jackson Davis","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2fdb47d6df1226e92380d96973782572a97b0675d098bb914410dec348eb5d29?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2fdb47d6df1226e92380d96973782572a97b0675d098bb914410dec348eb5d29?s=96&d=mm&r=g","caption":"Jackson Davis"},"url":"https:\/\/www.silicloud.com\/blog\/author\/jacksondavis\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/15049","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=15049"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/15049\/revisions"}],"predecessor-version":[{"id":48494,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/15049\/revisions\/48494"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=15049"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=15049"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=15049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}