{"id":15792,"date":"2024-03-15T11:45:07","date_gmt":"2024-03-15T11:45:07","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-can-react-achieve-page-switching-through-sliding\/"},"modified":"2025-08-06T21:35:54","modified_gmt":"2025-08-06T21:35:54","slug":"how-can-react-achieve-page-switching-through-sliding","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-can-react-achieve-page-switching-through-sliding\/","title":{"rendered":"How can React achieve page switching through sliding?"},"content":{"rendered":"<p>To achieve page transition through swiping in React, you can utilize the React Router library along with some CSS styling.<\/p>\n<p>First, install the React Router library.<\/p>\n<pre class=\"post-pre\"><code>npm install react-router-dom\r\n<\/code><\/pre>\n<p>Next, create a component that includes multiple pages, such as the App component.<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-title class_\">React<\/span> <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\r\n<span class=\"hljs-keyword\">import<\/span> { <span class=\"hljs-title class_\">BrowserRouter<\/span> <span class=\"hljs-keyword\">as<\/span> <span class=\"hljs-title class_\">Router<\/span>, <span class=\"hljs-title class_\">Route<\/span>, <span class=\"hljs-title class_\">Link<\/span>, <span class=\"hljs-title class_\">Switch<\/span> } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-router-dom'<\/span>;\r\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'.\/App.css'<\/span>;\r\n\r\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-title class_\">Home<\/span> <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/pages\/Home'<\/span>;\r\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-title class_\">About<\/span> <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/pages\/About'<\/span>;\r\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-title class_\">Contact<\/span> <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/pages\/Contact'<\/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\">return<\/span> (\r\n    <span class=\"language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Router<\/span>&gt;<\/span>\r\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"app\"<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">nav<\/span>&gt;<\/span>\r\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>\r\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span> <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"\/\"<\/span>&gt;<\/span>Home<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>\r\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span> <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"\/about\"<\/span>&gt;<\/span>About<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>\r\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span> <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"\/contact\"<\/span>&gt;<\/span>Contact<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\r\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">nav<\/span>&gt;<\/span>\r\n\r\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Switch<\/span>&gt;<\/span>\r\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Route<\/span> <span class=\"hljs-attr\">path<\/span>=<span class=\"hljs-string\">\"\/\"<\/span> <span class=\"hljs-attr\">exact<\/span> <span class=\"hljs-attr\">component<\/span>=<span class=\"hljs-string\">{Home}<\/span> \/&gt;<\/span>\r\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Route<\/span> <span class=\"hljs-attr\">path<\/span>=<span class=\"hljs-string\">\"\/about\"<\/span> <span class=\"hljs-attr\">component<\/span>=<span class=\"hljs-string\">{About}<\/span> \/&gt;<\/span>\r\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Route<\/span> <span class=\"hljs-attr\">path<\/span>=<span class=\"hljs-string\">\"\/contact\"<\/span> <span class=\"hljs-attr\">component<\/span>=<span class=\"hljs-string\">{Contact}<\/span> \/&gt;<\/span>\r\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Switch<\/span>&gt;<\/span>\r\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Router<\/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<p>In the code above, BrowserRouter is used as the Router component, and three links are defined in the nav section corresponding to the Home, About, and Contact pages. The Switch component is used to ensure that only one route can be matched.<\/p>\n<p>Next, create components for each page, such as the Home component.<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-title class_\">React<\/span> <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_\">Home<\/span> = (<span class=\"hljs-params\"><\/span>) =&gt; {\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      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Home Page<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\r\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Welcome to the home page!<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/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_\">Home<\/span>;\r\n<\/code><\/pre>\n<p>Similarly, create components for the About and Contact pages.<\/p>\n<p>Next, add CSS styles to achieve the effect of sliding between pages. Add the following styles to the App.css file.<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-selector-class\">.app<\/span> {\r\n  <span class=\"hljs-attribute\">display<\/span>: flex;\r\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100vh<\/span>;\r\n}\r\n\r\n<span class=\"hljs-selector-tag\">nav<\/span> {\r\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">20%<\/span>;\r\n  <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#f0f0f0<\/span>;\r\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">20px<\/span>;\r\n}\r\n\r\n<span class=\"hljs-selector-tag\">nav<\/span> <span class=\"hljs-selector-tag\">ul<\/span> {\r\n  <span class=\"hljs-attribute\">list-style-type<\/span>: none;\r\n}\r\n\r\n<span class=\"hljs-selector-tag\">nav<\/span> <span class=\"hljs-selector-tag\">ul<\/span> <span class=\"hljs-selector-tag\">li<\/span> {\r\n  <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">10px<\/span>;\r\n}\r\n\r\n<span class=\"hljs-selector-tag\">nav<\/span> <span class=\"hljs-selector-tag\">ul<\/span> <span class=\"hljs-selector-tag\">li<\/span> <span class=\"hljs-selector-tag\">a<\/span> {\r\n  <span class=\"hljs-attribute\">text-decoration<\/span>: none;\r\n  <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#000<\/span>;\r\n}\r\n\r\n<span class=\"hljs-selector-class\">.content<\/span> {\r\n  <span class=\"hljs-attribute\">flex<\/span>: <span class=\"hljs-number\">1<\/span>;\r\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">20px<\/span>;\r\n  <span class=\"hljs-attribute\">overflow-y<\/span>: scroll;\r\n  -webkit-<span class=\"hljs-attribute\">overflow<\/span>-scrolling: touch;\r\n  <span class=\"hljs-attribute\">transition<\/span>: transform <span class=\"hljs-number\">0.3s<\/span> ease;\r\n}\r\n\r\n<span class=\"hljs-selector-class\">.content-enter<\/span> {\r\n  <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateX<\/span>(<span class=\"hljs-number\">100%<\/span>);\r\n}\r\n\r\n<span class=\"hljs-selector-class\">.content-enter-active<\/span> {\r\n  <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateX<\/span>(<span class=\"hljs-number\">0<\/span>);\r\n}\r\n\r\n<span class=\"hljs-selector-class\">.content-exit<\/span> {\r\n  <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateX<\/span>(<span class=\"hljs-number\">0<\/span>);\r\n}\r\n\r\n<span class=\"hljs-selector-class\">.content-exit-active<\/span> {\r\n  <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateX<\/span>(-<span class=\"hljs-number\">100%<\/span>);\r\n}\r\n<\/code><\/pre>\n<p>Finally, when running the application and switching pages, the pages will have a sliding transition effect.<\/p>\n<p>Please note that this is just one way to implement sliding page transition, and the specific implementation may vary depending on the project requirements.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To achieve page transition through swiping in React, you can utilize the React Router library along with some CSS styling. First, install the React Router library. npm install react-router-dom Next, create a component that includes multiple pages, such as the App component. import React from &#8216;react&#8217;; import { BrowserRouter as Router, Route, Link, Switch } [&hellip;]<\/p>\n","protected":false},"author":12,"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-15792","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 can React achieve page switching through sliding? - Blog - Silicon Cloud<\/title>\n<meta name=\"description\" content=\"Learn about how can react achieve page switching through sliding?. 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-can-react-achieve-page-switching-through-sliding\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How can React achieve page switching through sliding?\" \/>\n<meta property=\"og:description\" content=\"Learn about how can react achieve page switching through sliding?. Comprehensive guide with examples and best practices.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-can-react-achieve-page-switching-through-sliding\/\" \/>\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-15T11:45:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-06T21:35:54+00:00\" \/>\n<meta name=\"author\" content=\"Liam\" \/>\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=\"Liam\" \/>\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-can-react-achieve-page-switching-through-sliding\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-react-achieve-page-switching-through-sliding\/\"},\"author\":{\"name\":\"Liam\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/23786905eb7b377f45ddb01c17da7671\"},\"headline\":\"How can React achieve page switching through sliding?\",\"datePublished\":\"2024-03-15T11:45:07+00:00\",\"dateModified\":\"2025-08-06T21:35:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-react-achieve-page-switching-through-sliding\/\"},\"wordCount\":170,\"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-can-react-achieve-page-switching-through-sliding\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-can-react-achieve-page-switching-through-sliding\/\",\"name\":\"How can React achieve page switching through sliding? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T11:45:07+00:00\",\"dateModified\":\"2025-08-06T21:35:54+00:00\",\"description\":\"Learn about how can react achieve page switching through sliding?. Comprehensive guide with examples and best practices.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-react-achieve-page-switching-through-sliding\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-can-react-achieve-page-switching-through-sliding\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-react-achieve-page-switching-through-sliding\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How can React achieve page switching through sliding?\"}]},{\"@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\/23786905eb7b377f45ddb01c17da7671\",\"name\":\"Liam\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8d37ed3e7f770dde8bf069ba0b4298688028c3abaacf1131742fc1352d174ebd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8d37ed3e7f770dde8bf069ba0b4298688028c3abaacf1131742fc1352d174ebd?s=96&d=mm&r=g\",\"caption\":\"Liam\"},\"sameAs\":[\"http:\/\/Wilson\"],\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/liamwilson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How can React achieve page switching through sliding? - Blog - Silicon Cloud","description":"Learn about how can react achieve page switching through sliding?. 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-can-react-achieve-page-switching-through-sliding\/","og_locale":"en_US","og_type":"article","og_title":"How can React achieve page switching through sliding?","og_description":"Learn about how can react achieve page switching through sliding?. Comprehensive guide with examples and best practices.","og_url":"https:\/\/www.silicloud.com\/blog\/how-can-react-achieve-page-switching-through-sliding\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T11:45:07+00:00","article_modified_time":"2025-08-06T21:35:54+00:00","author":"Liam","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Liam","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-can-react-achieve-page-switching-through-sliding\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-react-achieve-page-switching-through-sliding\/"},"author":{"name":"Liam","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/23786905eb7b377f45ddb01c17da7671"},"headline":"How can React achieve page switching through sliding?","datePublished":"2024-03-15T11:45:07+00:00","dateModified":"2025-08-06T21:35:54+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-react-achieve-page-switching-through-sliding\/"},"wordCount":170,"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-can-react-achieve-page-switching-through-sliding\/","url":"https:\/\/www.silicloud.com\/blog\/how-can-react-achieve-page-switching-through-sliding\/","name":"How can React achieve page switching through sliding? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T11:45:07+00:00","dateModified":"2025-08-06T21:35:54+00:00","description":"Learn about how can react achieve page switching through sliding?. Comprehensive guide with examples and best practices.","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-react-achieve-page-switching-through-sliding\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-can-react-achieve-page-switching-through-sliding\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-can-react-achieve-page-switching-through-sliding\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How can React achieve page switching through sliding?"}]},{"@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\/23786905eb7b377f45ddb01c17da7671","name":"Liam","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8d37ed3e7f770dde8bf069ba0b4298688028c3abaacf1131742fc1352d174ebd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8d37ed3e7f770dde8bf069ba0b4298688028c3abaacf1131742fc1352d174ebd?s=96&d=mm&r=g","caption":"Liam"},"sameAs":["http:\/\/Wilson"],"url":"https:\/\/www.silicloud.com\/blog\/author\/liamwilson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/15792","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\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=15792"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/15792\/revisions"}],"predecessor-version":[{"id":49324,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/15792\/revisions\/49324"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=15792"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=15792"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=15792"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}