React Router with Nx

React Router is the successor of Remix and is the recommended routing library for new projects that may require Server-Side Routing (SSR).

There are three modes when using React Router: framework, declarative and data. Framework mode is the most comprehensive and is what will be covered in this recipe.

We'll show you how to create a React Router application with Nx.

Create Nx Workspace

~/❯

npx create-nx-workspace@latest acme --preset=apps

1 2✔ Which stack do you want to use? · react 3✔ What framework would you like to use? · none 4✔ Application name · acme 5✔ Would you like to use React Router for server-side rendering [https://reactrouter.com/]? · Yes 6

Have an existing App?

If you already have an existing React Router application and want to add Nx to it you can do so by running the following command:

❯

npx nx init

Generate a React Router Application

If you would like to generate a new React Router application, you can do so by running the following command in your Nx workspace

~/acme❯

nx g @nx/react:app apps/happynrwl --routing --use-react-router

1 2

There is no need to install any additional plugins to use React Router with Nx. The @nx/react plugin already includes support for React Router.

Running the Application

Now that you have created your React Router application with Nx you can build, serve and test with the following commands:

Build

To build your application run the following command:

~/acme❯

nx build happynrwl

1 2> nx run acme:happynrwl 3 4> react-router build 5 6vite v6.2.1 building for production... 7✓ 45 modules transformed. 8build/client/.vite/manifest.json 1.40 kB │ gzip: 0.32 kB 9build/client/assets/about-D7ArdXr1.js 0.20 kB │ gzip: 0.18 kB 10build/client/assets/with-props-CQyfqcsx.js 0.22 kB │ gzip: 0.19 kB 11build/client/assets/root-BKqDrCrU.js 0.99 kB │ gzip: 0.54 kB 12build/client/assets/app-DnLbn-a2.js 24.50 kB │ gzip: 6.26 kB 13build/client/assets/chunk-K6CSEXPM-DXuCqE6i.js 111.05 kB │ gzip: 37.47 kB 14build/client/assets/entry.client-CkXnIIWp.js 179.95 kB │ gzip: 56.93 kB 15✓ built in 576ms 16vite v6.2.1 building SSR bundle for production... 17✓ 9 modules transformed. 18build/server/.vite/manifest.json 0.17 kB 19build/server/index.js 43.12 kB 20✓ built in 35ms 21 22 23 24 NX Successfully ran target build for project happynrwl (1s) 25

Serve (Development)

To serve your application for development use the following command:

~/acme❯

nx dev happynrwl

1> nx run happynrwl:dev 2 3> react-router dev 4 51:30:42 p.m. [vite] (client) Re-optimizing dependencies because lockfile has changed 6 ➜ Local: http://localhost:4200/ 7 ➜ press h + enter to show help 8

Serve (Production)

To serve your application's production build use the following command:

~/acme❯

nx start happynrwl

1> nx run happynrwl:build 2 3> react-router build 4 5vite v6.2.1 building for production... 6✓ 45 modules transformed. 7build/client/.vite/manifest.json 1.40 kB │ gzip: 0.32 kB 8build/client/assets/about-D7ArdXr1.js 0.20 kB │ gzip: 0.18 kB 9build/client/assets/with-props-CQyfqcsx.js 0.22 kB │ gzip: 0.19 kB 10build/client/assets/root-BKqDrCrU.js 0.99 kB │ gzip: 0.54 kB 11build/client/assets/app-DnLbn-a2.js 24.50 kB │ gzip: 6.26 kB 12build/client/assets/chunk-K6CSEXPM-DXuCqE6i.js 111.05 kB │ gzip: 37.47 kB 13build/client/assets/entry.client-CkXnIIWp.js 179.95 kB │ gzip: 56.93 kB 14✓ built in 576ms 15vite v6.2.1 building SSR bundle for production... 16✓ 9 modules transformed. 17build/server/.vite/manifest.json 0.17 kB 18build/server/index.js 43.12 kB 19✓ built in 35ms 20 21> nx run happynrwl:start 22 23> react-router-serve build/server/index.js 24 25[react-router-serve] http://localhost:3000 (http://192.168.0.112:3000) 26
PORT

The default port for production is 3000 if you want to change it use the PORT environment variable

Unit Test

To unit test the application run the following command:

~/acme❯

nx test happynrwl

1> nx run happynrwl:test 2 3> vitest 4 5 6 RUN v3.0.8 /private/tmp/projects/acme/apps/happynrwl 7 8 ✓ tests/routes/_index.spec.tsx (1 test) 45ms 9 ✓ renders loader data 10 11 Test Files 1 passed (1) 12 Tests 1 passed (1) 13 Start at 13:40:29 14 Duration 807ms (transform 59ms, setup 0ms, collect 168ms, tests 45ms, environment 372ms, prepare 52ms) 15

Generate a Route

By default a route is generated for you when you create a new React Router application. If you would like to generate a new route you can do so by running the following command:

~/happynrwl❯

nx g @nx/react:component --path=apps/happynrwl/app/routes/contact

1CREATE apps/happynrwl/app/routes/contact.tsx 2CREATE apps/happynrwl/app/routes/contact.module.scss 3CREATE apps/happynrwl/app/routes/contact.spec.tsx 4

Now we have create a new route called contact in our application. Let's add that route to our routes.tsx file.

1import { type RouteConfig, index, route } from "@react-router/dev/routes"; 2 3export default [ 4 index('./app.tsx'), 5 route('about', './routes/about.tsx') 6 route('contact', './routes/contact.tsx') 7 ] satisfies RouteConfig; 8

Now if we serve or app and navigate to https://localhost:4200/contact we will see our new route.

GitHub Repository with Example

You can find an example of an Nx Workspace using React Router by clicking below

Example repository/nrwl/nx-recipes/tree/main/react-router>