component---src-template-doc-article-tsx-con…res-react-router-md-aeef97f1b13bb876a704.js

js shakacode.com collected 2026-10-04 00:27:01 UTC 56,994 bytes, 2 lines download raw bytes

1"use strict";(self.webpackChunkgatsby_starter_default=self.webpackChunkgatsby_starter_default||[]).push([[2197],{90326:function(n,a,s){s.r(a),s.d(a,{Head:function(){return g},default:function(){return m}});var e=s(28453),t=s(96540);function o(n){const a=Object.assign({h1:"h1",a:"a",span:"span",p:"p",blockquote:"blockquote",strong:"strong",h2:"h2",ul:"ul",li:"li",ol:"ol"},(0,e.R)(),n.components);return t.createElement(t.Fragment,null,t.createElement(a.h1,{id:"using-react-router",style:{position:"relative"}},t.createElement(a.a,{href:"#using-react-router","aria-label":"using react router permalink",className:"anchor before"},t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Using React Router"),"\n",t.createElement(a.p,null,"React on Rails supports React Router for client-side routing. This guide shows how to integrate React Router into your React on Rails application."),"\n",t.createElement(a.blockquote,null,"\n",t.createElement(a.p,null,"Looking for TanStack Router? See ",t.createElement(a.a,{href:"/linked-assets/5d15d8312c91a8470909504615d8f507/tanstack-router.md"},"Using TanStack Router"),"."),"\n"),"\n",t.createElement(a.p,null,t.createElement(a.strong,null,"Important:")," The React on Rails generator does not install React Router. You'll need to add it to your project manually."),"\n",t.createElement(a.blockquote,null,"\n",t.createElement(a.p,null,"React Router support in React on Rails is a manual integration pattern.\nIf you want a first-class SSR helper with router dehydration/hydration, use TanStack Router with React on Rails Pro."),"\n"),"\n",t.createElement(a.h2,{id:"compatibility-note",style:{position:"relative"}},t.createElement(a.a,{href:"#compatibility-note","aria-label":"compatibility note permalink",className:"anchor before"},t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Compatibility Note"),"\n",t.createElement(a.p,null,"If you're using Turbo (Rails 7+) or Turbolinks (Rails 6 and earlier), be aware that both React Router and Turbo/Turbolinks handle browser navigation and the back button. These two routing systems can conflict. C

1onsider:"),"\n",t.createElement(a.ul,null,"\n",t.createElement(a.li,null,"Using one routing approach (either Turbo OR React Router, not both)"),"\n",t.createElement(a.li,null,"Disabling Turbo for pages using React Router with ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">data-turbo="false"</code>'}})),"\n",t.createElement(a.li,null,"Using code splitting instead of client-side routing for similar performance benefits"),"\n"),"\n",t.createElement(a.p,null,"If you successfully integrate both, please share your solution with the community!"),"\n",t.createElement(a.p,null,"For more details, see ",t.createElement(a.a,{href:"/linked-assets/c969de4e30362a3cc2a86b50ef2fc3a2/turbolinks.md"},"Turbo/Turbolinks Guide"),"."),"\n",t.createElement(a.h2,{id:"installation",style:{position:"relative"}},t.createElement(a.a,{href:"#installation","aria-label":"installation permalink",className:"anchor before"},t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Installation"),"\n",t.createElement(a.p,null,"First, add React Router v6 to your project:"),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="bash"><pre class="language-bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> react-router-dom@^6.0.0\n<span class="token comment"># or: yarn add react-router-dom@^6.0.0</span>\n<span class="token comment"># or: pnpm add react-router-dom@^6.0.0</span></code></pre></div>'}}),"\n",t.createElement(a.p,null,t.createElement(a.strong,null,"Why React Router v6?")," React Router v7 has merged with Remix and uses a different architecture that may not be fully compatible with React on Rails' manual server-side rendering approach. We recommend v6 for stable integration. If you need v7 features, please test thoroughly and share your findings with the community."),"\n",t.createElement(a.p,null,"React Router v6 offers multiple routing approaches. For React on Rails, we recommend ",t.createElement(a.strong,null,"Declarative Mode")," (traditional component-based routing, covered in this guide)."),"\n",t.createElement(a.p,null,t.createElement(a.strong,null,"Note on Data Mode:")," React Router's Data Mode (with loaders/actions) is designed for SPAs where the client handles data fetching. Since React on Rails uses Rails controllers to load data and pass it as props to React components, Data Mode would create duplicate data loading. Stick with Declarative Mode to leverage React on Rails' server-side data loading pattern."),"\n",t.createElement(a.h2,{id:"basic-client-side-setup",style:{position:"relative"}},t.createElement(a.a,{href:"#basic-client-side-setup","aria-label":"basic client side setup permalink",className:"anchor before"},t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Basic Client-Side Setup"),"\n",t.createElement(a.p,null,"Most React Router integrations do not need Redux. Route ordinary components inside one React root, pass initial data from Rails as props, and use your normal server-state approach for follow-up data loading."),"\n",t.createElement(a.p,null,t.createElement(a.strong,null,"File: ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">app/javascript/src/RouterApp/RouterRoutes.jsx</code>'}}))),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">

1import</span> React <span class="token keyword">from</span> <span class="token string">\'react\'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> <span class="token punctuation">{</span> Routes<span class="token punctuation">,</span> Route <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'react-router-dom\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">Home</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> name <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">Hello, </span><span class="token punctuation">{</span>name<span class="token punctuation">}</span><span class="token plain-text">!</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> <span class="token function-variable function">About</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">About</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">RouterRoutes</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Routes</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/hello_world<span class="token punctuation">"</span></span> <span class="token attr-name">element</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Home</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token operator">...</span>props<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/hello_world/about<span class="token punctuation">"</span></span> <span class="token attr-name">element</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">About</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Routes</span></span><span class="token punctuation">></span></span>\n<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> RouterRoutes<span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(a.p,null,t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">RouterRoutes.jsx</code>'}})," is a shared route tree that expects a router context from its parent. Keep it outside\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">ror_components/</code>'}})," and do not register it directly with React on Rails. Only the files inside\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">ror_components/</code>'}})," are registered entry points."),"\n",t.createElement(a.p,null,t.createElement(a.strong,null,"File: ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">app/javascript/src/RouterApp/ror_components/RouterApp.client.jsx</code>'}}))),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">

1import</span> React <span class="token keyword">from</span> <span class="token string">\'react\'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> <span class="token punctuation">{</span> BrowserRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'react-router-dom\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">import</span> RouterRoutes <span class="token keyword">from</span> <span class="token string">\'../RouterRoutes\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">RouterApp</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">BrowserRouter</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">RouterRoutes</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token operator">...</span>props<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">BrowserRouter</span></span><span class="token punctuation">></span></span>\n<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> RouterApp<span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(a.h2,{id:"legacy-client-side-setup-with-redux",style:{position:"relative"}},t.createElement(a.a,{href:"#legacy-client-side-setup-with-redux","aria-label":"legacy client side setup with redux permalink",className:"anchor before"},t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Legacy Client-Side Setup with Redux"),"\n",t.createElement(a.p,null,"If you're maintaining an app that already uses Redux, including the hidden legacy Redux generator output, you can add React Router by wrapping your app:"),"\n",t.createElement(a.p,null,t.createElement(a.strong,null,"File: ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">app/javascript/src/HelloWorldApp/ror_components/HelloWorldApp.client.jsx</code>'}}))),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">\'react\'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> <span class="token punctuation">{</span> Provider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'react-redux\'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> <span class="token punctuation">{</span> BrowserRouter<span class="token punctuation">,</span> Routes<span class="token punctuation">,</span> Route <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'react-router-dom\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">

1import</span> configureStore <span class="token keyword">from</span> <span class="token string">\'../store/helloWorldStore\'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> HelloWorldContainer <span class="token keyword">from</span> <span class="token string">\'../containers/HelloWorldContainer\'</span><span class="token punctuation">;</span>\n<span class="token comment">// Import other components for routing</span>\n<span class="token comment">// import About from \'../components/About\';</span>\n<span class="token comment">// import Contact from \'../components/Contact\';</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">HelloWorldApp</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n  <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">configureStore</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n  <span class="token keyword">return</span> <span class="token punctuation">(</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Provider</span></span> <span class="token attr-name">store</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>store<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">BrowserRouter</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Routes</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span> <span class="token attr-name">element</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">HelloWorldContainer</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n          </span><span class="token punctuation">{</span><span class="token comment">/* Add more routes here */</span><span class="token punctuation">}</span><span class="token plain-text">\n          </span><span class="token punctuation">{</span><span class="token comment">/* &lt;Route path="/about" element={&lt;About />} /> */</span><span class="token punctuation">}</span><span class="token plain-text">\n          </span><span class="token punctuation">{</span><span class="token comment">/* &lt;Route path="/contact" element={&lt;Contact />} /> */</span><span class="token punctuation">}</span><span class="token plain-text">\n        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Routes</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">BrowserRouter</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Provider</span></span><span class="token punctuation">></span></span>\n  <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> HelloWorldApp<span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(a.p,null,t.createElement(a.strong,null,"Key points:")),"\n",t.createElement(a.ul,null,"\n",t.createElement(a.li,null,"In Redux-backed legacy apps, ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">&lt;Provider></code>'}})," wraps ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">&lt;BrowserRouter></code>'}})," so all routes have Redux access"),"\n",t.createElement(a.li,null,"Use ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">&lt;Routes></code>'}})," and ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">&lt;Route></code>'}})," (not ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">&lt;Switch></code>'}})," from React Router v5)"),"\n",t.createElement(a.li,null,"Use ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">element</code>'}})," prop to specify components (not ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">component</code>'}})," or ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">render</code>'}})," props from v5)"),"\n",t.createElement(a.li,null,"Routes are automatically matched by best fit, not render order"),"\n"),"\n",t.createElement(a.h2,{id:"basic-server-side-rendering-with-react-router",style:{position:"relative"}}

1,t.createElement(a.a,{href:"#basic-server-side-rendering-with-react-router","aria-label":"basic server side rendering with react router permalink",className:"anchor before"},t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Basic Server-Side Rendering with React Router"),"\n",t.createElement(a.p,null,"For server rendering without Redux, use the same route tree with ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">StaticRouter</code>'}})," instead of ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">BrowserRouter</code>'}}),".\nThis ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">.client.jsx</code>'}})," / ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">.server.jsx</code>'}})," split assumes\n",t.createElement(a.a,{href:"/linked-assets/68f6de8da33e5ea5631565673247b660/auto-bundling-file-system-based-automated-bundle-generation.md"},"auto-bundling"),"\nis configured so React on Rails registers the client and server files separately.\nThe server entry returns a render function, not JSX directly; see\n",t.createElement(a.a,{href:"/linked-assets/437539654674ca3b3c8e166e0056e147/render-functions-and-railscontext.md"},"Render-Functions and railsContext"),"."),"\n",t.createElement(a.p,null,t.createElement(a.strong,null,"File: ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">app/javascript/src/RouterApp/ror_components/RouterApp.server.jsx</code>'}}))),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">\'react\'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> <span class="token punctuation">{</span> StaticRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'react-router-dom/server\'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> RouterRoutes <span class="token keyword">from</span> <span class="token string">\'../RouterRoutes\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">RouterApp</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">props<span class="token punctuation">,</span> railsContext</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n  <span class="token keyword">const</span> <span class="token punctuation">{</span> location <span class="token punctuation">}</span> <span class="token operator">=</span> railsContext<span class="token punctuation">;</span>\n\n  <span class="token comment">// React on Rails calls RouterApp(props, railsContext) to get this function,</span>\n  <span class="token comment">// then calls createElement(returnedFn, props). This example uses the props</span>\n  <span class="token comment">// and location captured by closure.</span>\n  <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token parameter">_props</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">StaticRouter</span></span> <span class="token attr-name">location</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>location<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">RouterRoutes</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token operator">...</span>props<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">StaticRouter</span></span><span class="token punctuation">></span></span>\n  <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> RouterApp<span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(a.blockquote,null,"\n",t.createElement(a.p,null,t.createElement(a.strong,null,"Note:")," Components rendered through ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">react_component_hash</code>'}})," still need the explicit object return shape\ninstead of the render-function thunk shown here. Keep using ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">renderToString(...)</code>'}}

1)," and return the object\ndescribed in ",t.createElement(a.a,{href:"/linked-assets/0a2c8e98bf2ccaa4010cb77a70c594ad/render-functions.md"},"Render-Functions"),", for example\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">{ renderedHtml: { componentHtml: renderToString(...), ...otherSlots } }</code>'}}),"."),"\n"),"\n",t.createElement(a.h2,{id:"legacy-server-side-setup-with-redux",style:{position:"relative"}},t.createElement(a.a,{href:"#legacy-server-side-setup-with-redux","aria-label":"legacy server side setup with redux permalink",className:"anchor before"},t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Legacy Server-Side Setup with Redux"),"\n",t.createElement(a.p,null,"If your app still uses the legacy shared Redux store, keep the provider around the ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">StaticRouter</code>'}}),"."),"\n",t.createElement(a.p,null,t.createElement(a.strong,null,"File: ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">app/javascript/src/HelloWorldApp/ror_components/HelloWorldApp.server.jsx</code>'}}))),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">\'react\'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> <span class="token punctuation">{</span> StaticRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'react-router-dom/server\'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> <span class="token punctuation">{</span> Provider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'react-redux\'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> <span class="token punctuation">{</span> Routes<span class="token punctuation">,</span> Route <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'react-router-dom\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">import</span> configureStore <span class="token keyword">from</span> <span class="token string">\'../store/helloWorldStore\'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> HelloWorldContainer <span class="token keyword">from</span> <span class="token string">\'../containers/HelloWorldContainer\'</span><span class="token punctuation">;</span>\n<span class="token comment">// Import other components for routing</span>\n<span class="token comment">// import About from \'../components/About\';</span>\n<span class="token comment">// import Contact from \'../components/Contact\';</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">HelloWorldApp</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">props<span class="token punctuation">,</span> railsContext</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n  <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">configureStore</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token keyword">const</span> <span class="token punctuation">{</span> location <span class="token punctuation">}</span> <span class="token operator">=</span> railsContext<span class="token punctuation">;</span>\n\n  <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token parameter">_props</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Provider</span></span> <span class="token attr-name">store</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>store<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">StaticRouter</span></span> <span class="token attr-name">location</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>location<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Routes</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span> <span class="token attr-name">element</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">HelloWorldContainer</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n          </span><span class="token punctuation">{</span><span class="token comment">/* Add more routes here */</span><span class="token punctuation">}</span><span class="token plain-text">\n          </span><span class="token punctuation">{</span><span class="token comment">/* &lt;Route path="/about" element={&lt;About />} /> */</span><span class="token punctuation">}</span><span class="token plain-text">\n          </span><span class="token punctuation">{</span><span class="token comment">/* &lt;Route path="/contact" element={&lt;Contact />} /> */</span><span class="token punctuation">}</span><span class="token plain-text">\n        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Routes</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">StaticRouter</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Provider</span></span><span class="token punctuation">></span></span>\n  <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> HelloWorldApp<span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(a.p,null,t.createElement(a.strong,null,"Important changes from React Router v5:")),"\n",t.createElement(a.ul,null,"\n",t.createElement(a.li,null,"Import ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">StaticRouter</code>'}})," from ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:"<code class=\"language-text\">'react-router-dom/server'</code>"}})," (not ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:"<code class=\"language-text\">'react-router'</code>"}}),")"),"\n",t.createElement(a.li,null,"Use ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">&lt;Routes></code>'}})," and ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">&lt;Route></code>'}})," with ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">element</code>'}})," prop"),"\n",t.createElement(a.li,null,t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">location</code>'}})," prop takes a string path from ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">railsContext</code>'}})),"\n",t.createElement(a.li,null,"No need for ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">match()</code>'}})," or ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">RouterContext</code>'}})," - simplified API"),"\n",t.createElement(a.li,null,"Components rendered through ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">react_component_hash</code>'}})," still need the explicit object return shape\ninstead of the render-function thunk shown here. Keep using ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">renderToString(...)</code>'}}

1)," and return the\nobject described in ",t.createElement(a.a,{href:"/linked-assets/0a2c8e98bf2ccaa4010cb77a70c594ad/render-functions.md"},"Render-Functions"),", for example\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">{ renderedHtml: { componentHtml: renderToString(...), ...otherSlots } }</code>'}}),"."),"\n"),"\n",t.createElement(a.h2,{id:"rails-routes-configuration",style:{position:"relative"}},t.createElement(a.a,{href:"#rails-routes-configuration","aria-label":"rails routes configuration permalink",className:"anchor before"},t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Rails Routes Configuration"),"\n",t.createElement(a.p,null,t.createElement(a.strong,null,"Critical Step:")," To support direct URL visits, browser refresh, and server-side rendering, you must configure Rails to handle all React Router paths."),"\n",t.createElement(a.p,null,"Add a wildcard route in your ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">config/routes.rb</code>'}}),":"),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="ruby"><pre class="language-ruby"><code class="language-ruby"><span class="token comment"># config/routes.rb</span>\nRails<span class="token punctuation">.</span>application<span class="token punctuation">.</span>routes<span class="token punctuation">.</span>draw <span class="token keyword">do</span>\n  <span class="token comment"># Your main route</span>\n  get <span class="token string-literal"><span class="token string">\'your_path\'</span></span><span class="token punctuation">,</span> <span class="token symbol">to</span><span class="token operator">:</span> <span class="token string-literal"><span class="token string">\'your_controller#index\'</span></span>\n\n  <span class="token comment"># Wildcard catch-all for React Router sub-routes</span>\n  get <span class="token string-literal"><span class="token string">\'your_path/*path\'</span></span><span class="token punctuation">,</span> <span class="token symbol">to</span><span class="token operator">:</span> <span class="token string-literal"><span class="token string">\'your_controller#index\'</span></span>\n<span class="token keyword">end</span></code></pre></div>'}}),"\n",t.createElement(a.p,null,t.createElement(a.strong,null,"Example:")),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="ruby"><pre class="language-ruby"><code class="language-ruby"><span class="token comment"># For a HelloWorld app with React Router</span>\nget <span class="token string-literal"><span class="token string">\'hello_world\'</span></span><span class="token punctuation">,</span> <span class="token symbol">to</span><span class="token operator">:</span> <span class="token string-literal"><span class="token string">\'hello_world#index\'</span></span>\nget <span class="token string-literal"><span class="token string">\'hello_world/*path\'</span></span><span class="token punctuation">,</span> <span class="token symbol">to</span><span class="token operator">:</span> <span class="token string-literal"><span class="token string">\'hello_world#index\'</span></span></code></pre></div>'}}),"\n",t.createElement(a.p,null,"This configuration ensures:"),"\n",t.createElement(a.ul,null,"\n",t.createElement(a.li,null,t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">/hello_world</code>'}})," â Renders your React app"),"\n",t.createElement(a.li,null,t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">/hello_world/about</code>'}})," â Rails serves the same view, React Router handles routing"),"\n",t.createElement(a.li,null,t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">/hello_world/contact</code>'}})," â Rails serves the same view, React Router handles routing"),"\n",t.createElement(a.li,null,"Browser refresh works on any route"),"\n",t.createElement(a.li,null,"Direct URL visits work with server-side rendering"),"\n"),"\n",t.createElement(a.p,null,t.createElement(a.strong,null,"Important:")," Your React Router paths should match your Rails route structure. If Rails serves your app at ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">/hello_world</code>'}}),", your React Router routes should start with ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">/hello_world</code>'}}),":"),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Routes</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/hello_world<span class="token punctuation">"</span></span> <span class="token attr-name">element</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Home</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/hello_world/about<span class="token punctuation">"</span></span> <span class="token attr-name">element</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">About</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/hello_world/contact<span class="token punctuation">"</span></span> <span class="token attr-name">element</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Contact</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Routes</span></span><span class="token punctuation">></span></span></code></pre></div>'}}),"\n",t.createElement(a.h2,{id:"example-application",style:{position:"relative"}}

1,t.createElement(a.a,{href:"#example-application","aria-label":"example application permalink",className:"anchor before"},t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Example Application"),"\n",t.createElement(a.p,null,"For a complete example of React on Rails with React Router, see the ",t.createElement(a.a,{href:"https://github.com/shakacode/react-webpack-rails-tutorial"},"React Webpack Rails Tutorial"),"."),"\n",t.createElement(a.p,null,"For a practical example of route organization, see the ",t.createElement(a.a,{href:"https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/app/bundles/comments/routes/routes.jsx"},"routes configuration file")," from the tutorial."),"\n",t.createElement(a.p,null,t.createElement(a.strong,null,"Note:")," This tutorial uses a legacy directory structure (",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">client/app/bundles</code>'}}),") from earlier React on Rails versions. Modern projects use ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">app/javascript/src/</code>'}})," structure as shown in this guide. The React Router integration patterns remain applicable."),"\n",t.createElement(a.h2,{id:"navigate-component-ssr-behavior",style:{position:"relative"}},t.createElement(a.a,{href:"#navigate-component-ssr-behavior","aria-label":"navigate component ssr behavior permalink",className:"anchor before"},t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">&lt;Navigate></code>'}})," Component SSR Behavior"),"\n",t.createElement(a.p,null,"When using React Router's ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">&lt;Navigate></code>'}})," component with server-side rendering, be aware of the following behavior:"),"\n",t.createElement(a.ul,null,"\n",t.createElement(a.li,null,t.createElement(a.strong,null,"During SSR, ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">&lt;Navigate></code>'}})," is a no-op.")," It renders ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">null</code>'}})," because ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">useEffect</code>'}})," does not fire on the server. No redirect is performed â Rails still sends the full response with whatever HTML was rendered."),"\n",t.createElement(a.li,null,t.createElement(a.strong,null,"The redirect only fires on the client")," via ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">useEffect</code>'}}),", which runs after hydration. This means:","\n",t.createElement(a.ul,null,"\n",t.createElement(a.li,null,"Users briefly see the SSR content before being redirected (content flash)."),"\n",t.createElement(a.li,null,"Search engines see the original page content, not a redirect â there is no HTTP 301/302 status code."),"\n",t.createElement(a.li,null,"The client-side redirect adds a navigation entry to the browser history."),"\n"),"\n"),"\n"),"\n",t.createElement(a.p,null,t.createElement(a.strong,null,"Recommendations for SSR redirects:")),"\n",t.createElement(a.ol,null,"\n",t.createElement(a.li,null,t.createElement(a.strong,null,"Prefer Rails controller redirects")," for auth guards, canonical URLs, and SEO-critical redirects. Check conditions in your controller and call ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">redirect_to</code>'}})," before rendering."),"\n",t.createElement(a.li,null,t.createElement(a.strong,null,"Use ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">&lt;Navigate></code>'}})," only for client-side routing transitions")," where a brief flash is acceptable and SEO redirect semantics are not needed."),"\n"),"\n",t.createElement(a.h2,{id:"additional-resources",style:{position:"relative"}}

1,t.createElement(a.a,{href:"#additional-resources","aria-label":"additional resources permalink",className:"anchor before"},t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Additional Resources"),"\n",t.createElement(a.ul,null,"\n",t.createElement(a.li,null,t.createElement(a.a,{href:"https://reactrouter.com/"},"React Router Official Documentation")),"\n",t.createElement(a.li,null,t.createElement(a.a,{href:"/linked-assets/5d15d8312c91a8470909504615d8f507/tanstack-router.md"},"TanStack Router Guide for React on Rails")),"\n",t.createElement(a.li,null,t.createElement(a.a,{href:"https://reactrouter.com/docs/en/v6/upgrading/v5"},"React Router v6 Migration Guide")," - If upgrading from v5"),"\n",t.createElement(a.li,null,t.createElement(a.a,{href:"/linked-assets/c969de4e30362a3cc2a86b50ef2fc3a2/turbolinks.md"},"React on Rails Turbo/Turbolinks Guide")),"\n"))}var p=function(n){void 0===n&&(n={});const{wrapper:a}=Object.assign({},(0,e.R)(),n.components);return a?t.createElement(a,n,t.createElement(o,n)):o(n)},l=s(63679),c=s(95197),r=s(47388),u=s(23690),i=s(14487);const d=l.default.p.withConfig({displayName:"doc-article__RedirectFallback",componentId:"sc-tic2w5-0"})(["padding:2rem;"]),k=n=>{let{data:a,location:s,children:e}=n;const{headings:o}=a.article.childMdx,p=(0,c.X9)(s.pathname),[l,u]=t.useState(null),k=s.pathname.split("/"),m=k.indexOf("docs"),g=-1===m?s.pathname.length:k.slice(0,m+1).join("/").length,h=s.pathname.slice(0,g),y=s.pathname.slice(g+1).replace(/\/$/,"").split("/").filter((n=>""!==n)),f=y.length>1?y.slice(0,-1).join("/"):"";t.useEffect((()=>{if(!p)return;const{hash:n}=window.location;u(n);const a=""+p+n;window.location.href!==a&&window.location.replace(a)}),[p]);const R=null===p||null===l?null:""+p+l;return t.createElement(t.Fragment,null,null!==R?t.createElement(d,{role:"status","aria-live":"polite"},"Redirecting..."," ",t.createElement("a",{href:R,target:"_blank",rel:"noopener noreferrer"},"Click here if not redirected.")):t.createElement(r.A,{main:t.createElement(i.A,{body:e,headings:o,transformUrl:n=>{if(n.startsWith("http")||n.startsWith("#"))return n;const a=n.replace(/\.md$/,"/");if(a.startsWith("./"))return h+(""===f?"":"/"+f)+a.slice(1);if(a.startsWith("../")){if(""===f)return""+h+a.slice(2);const n=f.split("/").slice(0,-1).join("/");return h+(""===n?"":"/"+n)+a.slice(2)}return h+"/"+(""===f?"":f+"/")+a}})}))};function m(n){return t.createElement(k,n,t.createElement(p,n))}const g=n=>{let{data:a,location:s,pageContext:e}=n;const{headings:o}=a.article.childMdx,{siteUrl:p}=a.site.siteMetadata,{repoDisplayName:l}=e,r=o.find((n=>1===n.depth)),i=(0,c.X9)(s.pathname)||""+p.replace(/\/+$/,"")+s.pathname;return t.createElement(u.A,{title:r?r.value:l,description:r?r.value:l+" documentation",isArticle:!0,canonical:i,pathname:s.pathname})}}}]);
2//# sourceMappingURL=component---src-template-doc-article-tsx-content-file-path-cache-gatsby-source-git-react-on-rails-docs-oss-building-features-react-router-md-aeef97f1b13bb876a704.js.map

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.