{"id":25688,"date":"2024-03-16T05:25:26","date_gmt":"2024-03-16T05:25:26","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-to-pass-values-between-react-pages\/"},"modified":"2024-03-22T06:46:39","modified_gmt":"2024-03-22T06:46:39","slug":"what-is-the-method-to-pass-values-between-react-pages","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-to-pass-values-between-react-pages\/","title":{"rendered":"What is the method to pass values between React pages?"},"content":{"rendered":"<p>In React, there are several ways to pass values between pages.<\/p>\n<ol>\n<li>You can pass values from a parent component to a child component by defining properties in the parent component and then passing them to the child component. The child component can then access the passed values through the props attribute.<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><span class=\"hljs-comment\">\/\/ ParentComponent.js<\/span>\r\n<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_\">ChildComponent<\/span> <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/ChildComponent'<\/span>;\r\n\r\n<span class=\"hljs-keyword\">const<\/span> <span class=\"hljs-title function_\">ParentComponent<\/span> = (<span class=\"hljs-params\"><\/span>) =&gt; {\r\n  <span class=\"hljs-keyword\">const<\/span> value = <span class=\"hljs-string\">'Hello!'<\/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\">ChildComponent<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">{value}<\/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_\">ParentComponent<\/span>;\r\n\r\n<span class=\"hljs-comment\">\/\/ ChildComponent.js<\/span>\r\n<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_\">ChildComponent<\/span> = (<span class=\"hljs-params\">props<\/span>) =&gt; {\r\n  <span class=\"hljs-keyword\">return<\/span> <span class=\"language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>{props.value}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>;\r\n};\r\n\r\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-title class_\">ChildComponent<\/span>;\r\n<\/code><\/pre>\n<ol>\n<li>In the parent component, you can create a Context object and use the Provider component to wrap the child components wherever values need to be passed, then use the Consumer component in the child components to access the values.<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><span class=\"hljs-comment\">\/\/ ValueContext.js<\/span>\r\n<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 class_\">ValueContext<\/span> = <span class=\"hljs-title class_\">React<\/span>.<span class=\"hljs-title function_\">createContext<\/span>();\r\n\r\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-title class_\">ValueContext<\/span>;\r\n\r\n<span class=\"hljs-comment\">\/\/ ParentComponent.js<\/span>\r\n<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_\">ValueContext<\/span> <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/ValueContext'<\/span>;\r\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-title class_\">ChildComponent<\/span> <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/ChildComponent'<\/span>;\r\n\r\n<span class=\"hljs-keyword\">const<\/span> <span class=\"hljs-title function_\">ParentComponent<\/span> = (<span class=\"hljs-params\"><\/span>) =&gt; {\r\n  <span class=\"hljs-keyword\">const<\/span> value = <span class=\"hljs-string\">'Hello!'<\/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\">ValueContext.Provider<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">{value}<\/span>&gt;<\/span>\r\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ChildComponent<\/span> \/&gt;<\/span>\r\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ValueContext.Provider<\/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_\">ParentComponent<\/span>;\r\n\r\n<span class=\"hljs-comment\">\/\/ ChildComponent.js<\/span>\r\n<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_\">ValueContext<\/span> <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/ValueContext'<\/span>;\r\n\r\n<span class=\"hljs-keyword\">const<\/span> <span class=\"hljs-title function_\">ChildComponent<\/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\">ValueContext.Consumer<\/span>&gt;<\/span>\r\n      {value =&gt; <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>{value}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>}\r\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ValueContext.Consumer<\/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_\">ChildComponent<\/span>;\r\n<\/code><\/pre>\n<ol>\n<li>Using route parameters: When navigating between pages using routes, values can be passed through route parameters. By defining parameters in the route, you can access the parameter values in the target page using props.match.params.<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><span class=\"hljs-comment\">\/\/ App.js<\/span>\r\n<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-keyword\">from<\/span> <span class=\"hljs-string\">'react-router-dom'<\/span>;\r\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-title class_\">ParentComponent<\/span> <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/ParentComponent'<\/span>;\r\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-title class_\">ChildComponent<\/span> <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/ChildComponent'<\/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\">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\">{ParentComponent}<\/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\">\"\/child\/:value\"<\/span> <span class=\"hljs-attr\">component<\/span>=<span class=\"hljs-string\">{ChildComponent}<\/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\r\n<span class=\"hljs-comment\">\/\/ ParentComponent.js<\/span>\r\n<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_\">Link<\/span> } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-router-dom'<\/span>;\r\n\r\n<span class=\"hljs-keyword\">const<\/span> <span class=\"hljs-title function_\">ParentComponent<\/span> = (<span class=\"hljs-params\"><\/span>) =&gt; {\r\n  <span class=\"hljs-keyword\">const<\/span> value = <span class=\"hljs-string\">'Hello!'<\/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      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span> <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">{<\/span>`\/<span class=\"hljs-attr\">child<\/span>\/${<span class=\"hljs-attr\">value<\/span>}`}&gt;<\/span>Go to Child Component<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/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_\">ParentComponent<\/span>;\r\n\r\n<span class=\"hljs-comment\">\/\/ ChildComponent.js<\/span>\r\n<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_\">ChildComponent<\/span> = (<span class=\"hljs-params\">props<\/span>) =&gt; {\r\n  <span class=\"hljs-keyword\">const<\/span> value = props.<span class=\"hljs-property\">match<\/span>.<span class=\"hljs-property\">params<\/span>.<span class=\"hljs-property\">value<\/span>;\r\n  \r\n  <span class=\"hljs-keyword\">return<\/span> <span class=\"language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>{value}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>;\r\n};\r\n\r\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-title class_\">ChildComponent<\/span>;\r\n<\/code><\/pre>\n<p>The above are several commonly used methods in React for passing values between pages, you can choose the method that suits your specific needs.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In React, there are several ways to pass values between pages. You can pass values from a parent component to a child component by defining properties in the parent component and then passing them to the child component. The child component can then access the passed values through the props attribute. \/\/ ParentComponent.js import React [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-25688","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"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>What is the method to pass values between React pages? - Blog - Silicon Cloud<\/title>\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\/what-is-the-method-to-pass-values-between-react-pages\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is the method to pass values between React pages?\" \/>\n<meta property=\"og:description\" content=\"In React, there are several ways to pass values between pages. You can pass values from a parent component to a child component by defining properties in the parent component and then passing them to the child component. The child component can then access the passed values through the props attribute. \/\/ ParentComponent.js import React [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-to-pass-values-between-react-pages\/\" \/>\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-16T05:25:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-22T06:46:39+00:00\" \/>\n<meta name=\"author\" content=\"Olivia Parker\" \/>\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=\"Olivia Parker\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-to-pass-values-between-react-pages\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-to-pass-values-between-react-pages\/\"},\"author\":{\"name\":\"Olivia Parker\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3ff7b3da0e45ac5dbbef2502f3cea8d9\"},\"headline\":\"What is the method to pass values between React pages?\",\"datePublished\":\"2024-03-16T05:25:26+00:00\",\"dateModified\":\"2024-03-22T06:46:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-to-pass-values-between-react-pages\/\"},\"wordCount\":160,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-to-pass-values-between-react-pages\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-to-pass-values-between-react-pages\/\",\"name\":\"What is the method to pass values between React pages? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-16T05:25:26+00:00\",\"dateModified\":\"2024-03-22T06:46:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-to-pass-values-between-react-pages\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-to-pass-values-between-react-pages\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-to-pass-values-between-react-pages\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What is the method to pass values between React pages?\"}]},{\"@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\/3ff7b3da0e45ac5dbbef2502f3cea8d9\",\"name\":\"Olivia Parker\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/56c66f189ba32a6f9eb50f31a38fe774e2a725c213d4070835ccc51b8fbbc54b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/56c66f189ba32a6f9eb50f31a38fe774e2a725c213d4070835ccc51b8fbbc54b?s=96&d=mm&r=g\",\"caption\":\"Olivia Parker\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/oliviaparker\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"What is the method to pass values between React pages? - Blog - Silicon Cloud","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\/what-is-the-method-to-pass-values-between-react-pages\/","og_locale":"en_US","og_type":"article","og_title":"What is the method to pass values between React pages?","og_description":"In React, there are several ways to pass values between pages. You can pass values from a parent component to a child component by defining properties in the parent component and then passing them to the child component. The child component can then access the passed values through the props attribute. \/\/ ParentComponent.js import React [&hellip;]","og_url":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-to-pass-values-between-react-pages\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-16T05:25:26+00:00","article_modified_time":"2024-03-22T06:46:39+00:00","author":"Olivia Parker","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Olivia Parker","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-to-pass-values-between-react-pages\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-to-pass-values-between-react-pages\/"},"author":{"name":"Olivia Parker","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3ff7b3da0e45ac5dbbef2502f3cea8d9"},"headline":"What is the method to pass values between React pages?","datePublished":"2024-03-16T05:25:26+00:00","dateModified":"2024-03-22T06:46:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-to-pass-values-between-react-pages\/"},"wordCount":160,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-to-pass-values-between-react-pages\/","url":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-to-pass-values-between-react-pages\/","name":"What is the method to pass values between React pages? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-16T05:25:26+00:00","dateModified":"2024-03-22T06:46:39+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-to-pass-values-between-react-pages\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/what-is-the-method-to-pass-values-between-react-pages\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-to-pass-values-between-react-pages\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"What is the method to pass values between React pages?"}]},{"@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\/3ff7b3da0e45ac5dbbef2502f3cea8d9","name":"Olivia Parker","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/56c66f189ba32a6f9eb50f31a38fe774e2a725c213d4070835ccc51b8fbbc54b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/56c66f189ba32a6f9eb50f31a38fe774e2a725c213d4070835ccc51b8fbbc54b?s=96&d=mm&r=g","caption":"Olivia Parker"},"url":"https:\/\/www.silicloud.com\/blog\/author\/oliviaparker\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/25688","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\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=25688"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/25688\/revisions"}],"predecessor-version":[{"id":59812,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/25688\/revisions\/59812"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=25688"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=25688"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=25688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}