Skip to content
Nx Docs

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

Section titled “Create Nx Workspace”
npx create-nx-workspace@latest acme --preset=apps
✔ Which stack do you want to use? · react
✔ What framework would you like to use? · none
✔ Application name · acme
✔ Would you like to use React Router for server-side rendering [https://reactrouter.com/]? · Yes

Have an existing App?

Section titled “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@latest init

Generate a React Router Application

Section titled “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

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

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

Section titled “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

Section titled “Build”

To build your application run the following command:

nx build happynrwl
> nx run acme:happynrwl


> react-router build


vite v6.2.1 building for production...
✓ 45 modules transformed.
build/client/.vite/manifest.json                  1.40 kB │ gzip:  0.32 kB
build/client/assets/about-D7ArdXr1.js             0.20 kB │ gzip:  0.18 kB
build/client/assets/with-props-CQyfqcsx.js        0.22 kB │ gzip:  0.19 kB
build/client/assets/root-BKqDrCrU.js              0.99 kB │ gzip:  0.54 kB
build/client/assets/app-DnLbn-a2.js              24.50 kB │ gzip:  6.26 kB
build/client/assets/chunk-K6CSEXPM-DXuCqE6i.js  111.05 kB │ gzip: 37.47 kB
build/client/assets/entry.client-CkXnIIWp.js    179.95 kB │ gzip: 56.93 kB
✓ built in 576ms
vite v6.2.1 building SSR bundle for production...
✓ 9 modules transformed.
build/server/.vite/manifest.json   0.17 kB
build/server/index.js             43.12 kB
✓ built in 35ms






 NX   Successfully ran target build for project happynrwl (1s)

Serve (Development)

Section titled “Serve (Development)”

To serve your application for development use the following command:

nx dev happynrwl
> nx run happynrwl:dev


> react-router dev


1:30:42 p.m. [vite] (client) Re-optimizing dependencies because lockfile has changed
  ➜  Local:   http://localhost:4200/
  ➜  press h + enter to show help

Serve (Production)

Section titled “Serve (Production)”

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

nx start happynrwl
> nx run happynrwl:build


> react-router build


vite v6.2.1 building for production...
✓ 45 modules transformed.
build/client/.vite/manifest.json                  1.40 kB │ gzip:  0.32 kB
build/client/assets/about-D7ArdXr1.js             0.20 kB │ gzip:  0.18 kB
build/client/assets/with-props-CQyfqcsx.js        0.22 kB │ gzip:  0.19 kB
build/client/assets/root-BKqDrCrU.js              0.99 kB │ gzip:  0.54 kB
build/client/assets/app-DnLbn-a2.js              24.50 kB │ gzip:  6.26 kB
build/client/assets/chunk-K6CSEXPM-DXuCqE6i.js  111.05 kB │ gzip: 37.47 kB
build/client/assets/entry.client-CkXnIIWp.js    179.95 kB │ gzip: 56.93 kB
✓ built in 576ms
vite v6.2.1 building SSR bundle for production...
✓ 9 modules transformed.
build/server/.vite/manifest.json   0.17 kB
build/server/index.js             43.12 kB
✓ built in 35ms


> nx run happynrwl:start


> react-router-serve build/server/index.js


[react-router-serve] http://localhost:3000 (http://192.168.0.112:3000)

Unit Test

Section titled “Unit Test”

To unit test the application run the following command:

nx test happynrwl
// filename: ~/acme
> nx run happynrwl:test


> vitest




 RUN  v3.0.8 /private/tmp/projects/acme/apps/happynrwl


 ✓ tests/routes/_index.spec.tsx (1 test) 45ms
   ✓ renders loader data


 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  13:40:29
   Duration  807ms (transform 59ms, setup 0ms, collect 168ms, tests 45ms, environment 372ms, prepare 52ms)

Generate a Route

Section titled “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:

nx g @nx/react:component --path=apps/happynrwl/app/routes/contact
CREATE apps/happynrwl/app/routes/contact.tsx
CREATE apps/happynrwl/app/routes/contact.module.scss
CREATE apps/happynrwl/app/routes/contact.spec.tsx

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

routes.tsx
import { type RouteConfig, index, route } from "@react-router/dev/routes";


export default [
  index('./app.tsx'),
  route('about', './routes/about.tsx')
  route('contact', './routes/contact.tsx')
  ] satisfies RouteConfig;

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

GitHub Repository with Example

Section titled “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