Building a Multi-Page SPA with React RouterEntry 2 of 20

JSX Routes with `createRoutesFromElements`

An alternative way to define routes using <Route> JSX elements, converted into route objects by createRoutesFromElements.

Notes

Both styles produce the same route definitions.
JSX reads naturally for deeply nested layouts.
Plain objects are better when routes come from config or are generated dynamically. Objects are also the style used in the React Router docs.

What / Why / When

What: JSX syntax for route config.
Why: Nesting is visible in the markup.
When: Personal or team preference. Pick one style and stay consistent.

Code compare

React

import { createBrowserRouter, createRoutesFromElements, Route } from "react-router";const routeDefinitions = createRoutesFromElements(  <Route>    <Route path="/" element={<HomePage />} />    <Route path="/products" element={<ProductsPage />} />  </Route>,);const router = createBrowserRouter(routeDefinitions);

Angular has one style: the Routes array (Entry 1).

No Angular code for this example.

Quick reference

React	Angular
Route objects	`Routes` array
`<Route path element />` + `createRoutesFromElements`	—