RSC: Use Routes.tsx for (client-side) routing (#9630)

redwoodjs · Dec 5, 2023 · e9f5f01 · e9f5f01
1 parent 69a1770
commit e9f5f01
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 51 deletions.
diff --git a/__fixtures__/test-project-rsa/web/src/Routes.tsx b/__fixtures__/test-project-rsa/web/src/Routes.tsx
@@ -7,13 +7,22 @@
 // 'src/pages/HomePage/HomePage.js'         -> HomePage
 // 'src/pages/Admin/BooksPage/BooksPage.js' -> AdminBooksPage
 
-import { Router, Route } from '@redwoodjs/router'
+import { Router, Route, Set } from '@redwoodjs/router'
+import { serve } from '@redwoodjs/vite/client'
+
+import NavigationLayout from './layouts/NavigationLayout/NavigationLayout'
+import NotFoundPage from './pages/NotFoundPage/NotFoundPage'
+
+const AboutPage = serve('AboutPage')
+const HomePage = serve('HomePage')
 
 const Routes = () => {
   return (
     <Router>
-      <Route path="/about" page={AboutPage} name="about" />
-      <Route path="/" page={HomePage} name="home" />
+      <Set wrap={NavigationLayout}>
+        <Route path="/" page={HomePage} name="home" />
+        <Route path="/about" page={AboutPage} name="about" />
+      </Set>
       <Route notfound page={NotFoundPage} />
     </Router>
   )

diff --git a/__fixtures__/test-project-rsa/web/src/entry.client.tsx b/__fixtures__/test-project-rsa/web/src/entry.client.tsx
@@ -1,30 +1,18 @@
 import { createRoot } from 'react-dom/client'
 
-import { Route, Router, Set } from '@redwoodjs/router'
-import { serve } from '@redwoodjs/vite/client'
 import { FatalErrorBoundary } from '@redwoodjs/web'
 
-import NavigationLayout from './layouts/NavigationLayout/NavigationLayout'
 import FatalErrorPage from './pages/FatalErrorPage/FatalErrorPage'
-import NotFoundPage from './pages/NotFoundPage/NotFoundPage'
+import Routes from './Routes'
 
 const redwoodAppElement = document.getElementById('redwood-app')
 
-const AboutPage = serve('AboutPage')
-const HomePage = serve('HomePage')
-
 const root = createRoot(redwoodAppElement)
 
 const App = () => {
   return (
     <FatalErrorBoundary page={FatalErrorPage}>
-      <Router>
-        <Set wrap={NavigationLayout}>
-          <Route path="/" page={HomePage} name="home" />
-          <Route path="/about" page={AboutPage} name="about" />
-        </Set>
-        <Route notfound page={NotFoundPage} />
-      </Router>
+      <Routes />
     </FatalErrorBoundary>
   )
 }

diff --git a/__fixtures__/test-project-rsc-external-packages/web/src/Routes.tsx b/__fixtures__/test-project-rsc-external-packages/web/src/Routes.tsx
@@ -7,13 +7,22 @@
 // 'src/pages/HomePage/HomePage.js'         -> HomePage
 // 'src/pages/Admin/BooksPage/BooksPage.js' -> AdminBooksPage
 
-import { Router, Route } from '@redwoodjs/router'
+import { Router, Route, Set } from '@redwoodjs/router'
+import { serve } from '@redwoodjs/vite/client'
+
+import NavigationLayout from './layouts/NavigationLayout/NavigationLayout'
+import NotFoundPage from './pages/NotFoundPage/NotFoundPage'
+
+const AboutPage = serve('AboutPage')
+const HomePage = serve('HomePage')
 
 const Routes = () => {
   return (
     <Router>
-      <Route path="/about" page={AboutPage} name="about" />
-      <Route path="/" page={HomePage} name="home" />
+      <Set wrap={NavigationLayout}>
+        <Route path="/" page={HomePage} name="home" />
+        <Route path="/about" page={AboutPage} name="about" />
+      </Set>
       <Route notfound page={NotFoundPage} />
     </Router>
   )

diff --git a/__fixtures__/test-project-rsc-external-packages/web/src/entry.client.tsx b/__fixtures__/test-project-rsc-external-packages/web/src/entry.client.tsx
@@ -1,30 +1,18 @@
 import { createRoot } from 'react-dom/client'
 
-import { Route, Router, Set } from '@redwoodjs/router'
-import { serve } from '@redwoodjs/vite/client'
 import { FatalErrorBoundary } from '@redwoodjs/web'
 
-import NavigationLayout from './layouts/NavigationLayout/NavigationLayout'
 import FatalErrorPage from './pages/FatalErrorPage/FatalErrorPage'
-import NotFoundPage from './pages/NotFoundPage/NotFoundPage'
+import Routes from './Routes'
 
 const redwoodAppElement = document.getElementById('redwood-app')
 
-const AboutPage = serve('AboutPage')
-const HomePage = serve('HomePage')
-
 const root = createRoot(redwoodAppElement)
 
 const App = () => {
   return (
     <FatalErrorBoundary page={FatalErrorPage}>
-      <Router>
-        <Set wrap={NavigationLayout}>
-          <Route path="/" page={HomePage} name="home" />
-          <Route path="/about" page={AboutPage} name="about" />
-        </Set>
-        <Route notfound page={NotFoundPage} />
-      </Router>
+      <Routes />
     </FatalErrorBoundary>
   )
 }

diff --git a/packages/cli/src/commands/experimental/templates/rsc/Routes.tsx.template b/packages/cli/src/commands/experimental/templates/rsc/Routes.tsx.template
@@ -7,13 +7,22 @@
 // 'src/pages/HomePage/HomePage.js'         -> HomePage
 // 'src/pages/Admin/BooksPage/BooksPage.js' -> AdminBooksPage
 
-import { Router, Route } from '@redwoodjs/router'
+import { Router, Route, Set } from '@redwoodjs/router'
+import { serve } from '@redwoodjs/vite/client'
+
+import NavigationLayout from './layouts/NavigationLayout/NavigationLayout'
+import NotFoundPage from './pages/NotFoundPage/NotFoundPage'
+
+const AboutPage = serve('AboutPage')
+const HomePage = serve('HomePage')
 
 const Routes = () => {
   return (
     <Router>
-      <Route path="/about" page={AboutPage} name="about" />
-      <Route path="/" page={HomePage} name="home" />
+      <Set wrap={NavigationLayout}>
+        <Route path="/" page={HomePage} name="home" />
+        <Route path="/about" page={AboutPage} name="about" />
+      </Set>
       <Route notfound page={NotFoundPage} />
     </Router>
   )

diff --git a/packages/cli/src/commands/experimental/templates/rsc/entry.client.tsx.template b/packages/cli/src/commands/experimental/templates/rsc/entry.client.tsx.template
@@ -1,30 +1,18 @@
 import { createRoot } from 'react-dom/client'
 
-import { Route, Router, Set } from '@redwoodjs/router'
-import { serve } from '@redwoodjs/vite/client'
 import { FatalErrorBoundary } from '@redwoodjs/web'
 
-import NavigationLayout from './layouts/NavigationLayout/NavigationLayout'
 import FatalErrorPage from './pages/FatalErrorPage/FatalErrorPage'
-import NotFoundPage from './pages/NotFoundPage/NotFoundPage'
+import Routes from './Routes'
 
 const redwoodAppElement = document.getElementById('redwood-app')
 
-const AboutPage = serve('AboutPage')
-const HomePage = serve('HomePage')
-
 const root = createRoot(redwoodAppElement)
 
 const App = () => {
   return (
     <FatalErrorBoundary page={FatalErrorPage}>
-      <Router>
-        <Set wrap={NavigationLayout}>
-          <Route path="/" page={HomePage} name="home" />
-          <Route path="/about" page={AboutPage} name="about" />
-        </Set>
-        <Route notfound page={NotFoundPage} />
-      </Router>
+      <Routes />
     </FatalErrorBoundary>
   )
 }