# React Router 7 (/docs/guides/frameworks/react-router-7) Location: Guides > Frameworks > React Router 7 Introduction [#introduction] This guide shows you how to use Prisma ORM with [React Router 7](https://reactrouter.com/), a multi-strategy router that can be as minimal as declarative routing or as full-featured as a fullstack framework. You'll learn how to set up Prisma ORM and Prisma Postgres with React Router 7 and handle migrations. You can find a [deployment-ready example on GitHub](https://github.com/prisma/prisma-examples/blob/latest/orm/react-router-7). Prerequisites [#prerequisites] * [Node.js 20+](https://nodejs.org) 1. Set up your project [#1-set-up-your-project] From the directory where you want to create your project, run `create-react-router` to create a new React Router app that you will be using for this guide. #### npm ```bash npx create-react-router@latest react-router-7-prisma ``` #### pnpm ```bash pnpm dlx create-react-router@latest react-router-7-prisma ``` #### yarn ```bash yarn dlx create-react-router@latest react-router-7-prisma ``` #### bun ```bash bunx --bun create-react-router@latest react-router-7-prisma ``` You'll be prompted to select the following, select `Yes` for both: > [!NOTE] > * *Initialize a new git repository?* `Yes` > * *Install dependencies with npm?* `Yes` Now, navigate to the project directory: ```bash cd react-router-7-prisma ``` 2. Install and Configure Prisma [#2-install-and-configure-prisma] 2.1. Install dependencies [#21-install-dependencies] To get started with Prisma, you'll need to install a few dependencies: #### npm ```bash npm install prisma tsx @types/pg --save-dev ``` #### pnpm ```bash pnpm add prisma tsx @types/pg --save-dev ``` #### yarn ```bash yarn add prisma tsx @types/pg --dev ``` #### bun ```bash bun add prisma tsx @types/pg --dev ``` #### npm ```bash npm install @prisma/client @prisma/adapter-pg dotenv pg ``` #### pnpm ```bash pnpm add @prisma/client @prisma/adapter-pg dotenv pg ``` #### yarn ```bash yarn add @prisma/client @prisma/adapter-pg dotenv pg ``` #### bun ```bash bun add @prisma/client @prisma/adapter-pg dotenv pg ``` > [!NOTE] > If you are using a different database provider (MySQL, SQL Server, SQLite), install the corresponding driver adapter package instead of `@prisma/adapter-pg`. For more information, see [Database drivers](/orm/core-concepts/supported-databases/database-drivers). Once installed, initialize Prisma in your project: #### npm ```bash npx prisma init --output ../app/generated/prisma ``` #### pnpm ```bash pnpm dlx prisma init --output ../app/generated/prisma ``` #### yarn ```bash yarn dlx prisma init --output ../app/generated/prisma ``` #### bun ```bash bunx --bun prisma init --output ../app/generated/prisma ``` > [!NOTE] > `prisma init` creates the Prisma scaffolding and a local `DATABASE_URL`. In the next step, you will create a Prisma Postgres database and replace that value with a direct `postgres://...` connection string. This will create: * A `prisma` directory with a `schema.prisma` file. * A `prisma.config.ts` file for configuring Prisma * A `.env` file containing a local `DATABASE_URL` at the project root. * An `output` directory for the generated Prisma Client as `app/generated/prisma`. Create a Prisma Postgres database and replace the generated `DATABASE_URL` in your `.env` file with the `postgres://...` connection string from the CLI output: #### npm ```bash npx create-db ``` #### pnpm ```bash pnpm dlx create-db ``` #### yarn ```bash yarn dlx create-db ``` #### bun ```bash bunx --bun create-db ``` 2.2. Define your Prisma Schema [#22-define-your-prisma-schema] In the `prisma/schema.prisma` file, add the following models and change the generator to use the `prisma-client` provider: ```prisma title="prisma/schema.prisma" generator client { provider = "prisma-client" output = "../app/generated/prisma" } datasource db { provider = "postgresql" } model User { // [!code ++] id Int @id @default(autoincrement()) // [!code ++] email String @unique // [!code ++] name String? // [!code ++] posts Post[] // [!code ++] } // [!code ++] // [!code ++] model Post { // [!code ++] id Int @id @default(autoincrement()) // [!code ++] title String // [!code ++] content String? // [!code ++] published Boolean @default(false) // [!code ++] authorId Int // [!code ++] author User @relation(fields: [authorId], references: [id]) // [!code ++] } // [!code ++] ``` This creates two models: `User` and `Post`, with a one-to-many relationship between them. 2.3 Add dotenv to prisma.config.ts [#23-add-dotenv-to-prismaconfigts] To get access to the variables in the `.env` file, they can either be loaded by your runtime, or by using `dotenv`. Include an import for `dotenv` at the top of the `prisma.config.ts` ```ts import "dotenv/config"; // [!code ++] import { defineConfig, env } from "prisma/config"; export default defineConfig({ schema: "prisma/schema.prisma", migrations: { path: "prisma/migrations", }, datasource: { url: env("DATABASE_URL"), }, }); ``` 2.4. Configure the Prisma Client generator [#24-configure-the-prisma-client-generator] Now, run the following command to create the database tables and generate the Prisma Client: #### npm ```bash npx prisma migrate dev --name init ``` #### pnpm ```bash pnpm dlx prisma migrate dev --name init ``` #### yarn ```bash yarn dlx prisma migrate dev --name init ``` #### bun ```bash bunx --bun prisma migrate dev --name init ``` #### npm ```bash npx prisma generate ``` #### pnpm ```bash pnpm dlx prisma generate ``` #### yarn ```bash yarn dlx prisma generate ``` #### bun ```bash bunx --bun prisma generate ``` 2.5. Seed the database [#25-seed-the-database] Add some seed data to populate the database with sample users and posts. Create a new file called `seed.ts` in the `prisma/` directory: ```typescript title="prisma/seed.ts" import { PrismaClient, Prisma } from "../app/generated/prisma/client.js"; import { PrismaPg } from "@prisma/adapter-pg"; const adapter = new PrismaPg({ connectionString: process.env.DATABASE_URL!, }); const prisma = new PrismaClient({ adapter, }); const userData: Prisma.UserCreateInput[] = [ { name: "Alice", email: "alice@prisma.io", posts: { create: [ { title: "Join the Prisma Discord", content: "https://pris.ly/discord", published: true, }, { title: "Prisma on YouTube", content: "https://pris.ly/youtube", }, ], }, }, { name: "Bob", email: "bob@prisma.io", posts: { create: [ { title: "Follow Prisma on Twitter", content: "https://www.twitter.com/prisma", published: true, }, ], }, }, ]; export async function main() { for (const u of userData) { await prisma.user.create({ data: u }); } } main(); ``` Now, tell Prisma how to run this script by updating your `prisma.config.ts`: ```ts title="prisma.config.ts" import "dotenv/config"; import { defineConfig, env } from "prisma/config"; export default defineConfig({ schema: "prisma/schema.prisma", migrations: { path: "prisma/migrations", seed: `tsx prisma/seed.ts`, // [!code ++] }, datasource: { url: env("DATABASE_URL"), }, }); ``` Run the seed script: #### npm ```bash npx prisma db seed ``` #### pnpm ```bash pnpm dlx prisma db seed ``` #### yarn ```bash yarn dlx prisma db seed ``` #### bun ```bash bunx --bun prisma db seed ``` And open Prisma Studio to inspect your data: #### npm ```bash npx prisma studio ``` #### pnpm ```bash pnpm dlx prisma studio ``` #### yarn ```bash yarn dlx prisma studio ``` #### bun ```bash bunx --bun prisma studio ``` 3. Integrate Prisma into React Router 7 [#3-integrate-prisma-into-react-router-7] 3.1. Create a Prisma Client [#31-create-a-prisma-client] Inside of your `app` directory, create a new `lib` directory and add a `prisma.ts` file to it. This file will be used to create and export your Prisma Client instance. Set up the Prisma client like this: ```typescript title="app/lib/prisma.ts" import { PrismaClient } from "../generated/prisma/client.js"; import { PrismaPg } from "@prisma/adapter-pg"; const adapter = new PrismaPg({ connectionString: process.env.DATABASE_URL!, }); const globalForPrisma = global as unknown as { prisma: PrismaClient; }; const prisma = globalForPrisma.prisma || new PrismaClient({ adapter, }); if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma; export default prisma; ``` > [!WARNING] > We recommend using a connection pooler (like [Prisma Accelerate](https://www.prisma.io/accelerate)) to manage database connections efficiently. > > If you choose not to use one, **avoid** instantiating `PrismaClient` globally in long-lived environments. Instead, create and dispose of the client per request to prevent exhausting your database connections. You'll use this client in the next section to run your first queries. 3.2. Query your database with Prisma [#32-query-your-database-with-prisma] Now that you have an initialized Prisma Client, a connection to your database, and some initial data, you can start querying your data with Prisma ORM. In this example, you'll be making the "home" page of your application display all of your users. Open the `app/routes/home.tsx` file and replace the existing code with the following: ```tsx title="app/routes/home.tsx" import type { Route } from "./+types/home"; export function meta({}: Route.MetaArgs) { return [ { title: "New React Router App" }, { name: "description", content: "Welcome to React Router!" }, ]; } export default function Home({ loaderData }: Route.ComponentProps) { return (

Superblog

  1. Alice
  2. Bob
); } ``` > [!NOTE] > If you see an error on the first line, `import type { Route } from "./+types/home";`, make sure you run `npm run dev` so React Router generates needed types. This gives you a basic page with a title and a list of users. However, the list of users is static. Update the page to fetch the users from your database and make it dynamic. ```tsx title="app/routes/home.tsx" import type { Route } from "./+types/home"; import prisma from "~/lib/prisma"; // [!code ++] export function meta({}: Route.MetaArgs) { return [ { title: "New React Router App" }, { name: "description", content: "Welcome to React Router!" }, ]; } export async function loader() { // [!code ++] const users = await prisma.user.findMany(); // [!code ++] return { users }; // [!code ++] } // [!code ++] export default function Home({ loaderData }: Route.ComponentProps) { const { users } = loaderData; // [!code ++] return (

Superblog

    {users.map( ( user, // [!code ++] ) => (
  1. {" "} // [!code ++] {user.name} // [!code ++]
    2. // [!code ++] ), )}{" "} // [!code ++]
); } ``` You are now importing your client, using [a React Router loader](https://reactrouter.com/start/framework/data-loading#server-data-loading) to query the `User` model for all users, and then displaying them in a list. Now your home page is dynamic and will display the users from your database. 3.4 Update your data (optional) [#34-update-your-data-optional] If you want to see what happens when data is updated, you could: * update your `User` table via an SQL browser of your choice * change your `seed.ts` file to add more users * change the call to `prisma.user.findMany` to re-order the users, filter the users, or similar. Just reload the page and you'll see the changes. 4. Add a new Posts list page [#4-add-a-new-posts-list-page] You have your home page working, but you should add a new page that displays all of your posts. First, create a new `posts` directory under the `app/routes` directory and add a `home.tsx` file: ```bash mkdir -p app/routes/posts && touch app/routes/posts/home.tsx ``` Second, add the following code to the `app/routes/posts/home.tsx` file: ```tsx title="app/routes/posts/home.tsx" import type { Route } from "./+types/home"; import prisma from "~/lib/prisma"; export default function Home() { return (

Posts

); } ``` Second, update the `app/routes.ts` file so when you visit the `/posts` route, the `posts/home.tsx` page is shown: ```tsx title="app/routes.ts" import { type RouteConfig, index, route } from "@react-router/dev/routes"; // [!code highlight] export default [ index("routes/home.tsx"), route("posts", "routes/posts/home.tsx"), // [!code ++] ] satisfies RouteConfig; ``` Now `localhost:5173/posts` will load, but the content is static. Update it to be dynamic, similarly to the home page: ```tsx title="app/routes/posts/home.tsx" import type { Route } from "./+types/home"; import prisma from "~/lib/prisma"; export async function loader() { // [!code ++] const posts = await prisma.post.findMany({ // [!code ++] include: { // [!code ++] author: true, // [!code ++] }, // [!code ++] }); // [!code ++] return { posts }; // [!code ++] } // [!code ++] export default function Posts({ loaderData }: Route.ComponentProps) { const { posts } = loaderData; // [!code ++] return (

Posts

); } ``` This works similarly to the home page, but instead of displaying users, it displays posts. You can also see that you've used `include` in your Prisma Client query to fetch the author of each post so you can display the author's name. This "list view" is one of the most common patterns in web applications. You're going to add two more pages to your application which you'll also commonly need: a "detail view" and a "create view". 5. Add a new Posts detail page [#5-add-a-new-posts-detail-page] To complement the Posts list page, you'll add a Posts detail page. In the `routes/posts` directory, create a new `post.tsx` file. ```bash touch app/routes/posts/post.tsx ``` This page will display a single post's title, content, and author. Just like your other pages, add the following code to the `app/routes/posts/post.tsx` file: ```tsx title="app/routes/posts/post.tsx" import type { Route } from "./+types/post"; import prisma from "~/lib/prisma"; export default function Post({ loaderData }: Route.ComponentProps) { return (

My first post

by Anonymous

No content available.
); } ``` And then add a new route for this page: ```tsx title="app/routes.ts" export default [ index("routes/home.tsx"), route("posts", "routes/posts/home.tsx"), route("posts/:postId", "routes/posts/post.tsx"), // [!code ++] ] satisfies RouteConfig; ``` As before, this page is static. Update it to be dynamic based on the `params` passed to the page: ```tsx title="app/routes/posts/post.tsx" import { data } from "react-router"; // [!code ++] import type { Route } from "./+types/post"; import prisma from "~/lib/prisma"; export async function loader({ params }: Route.LoaderArgs) { // [!code ++] const { postId } = params; // [!code ++] const post = await prisma.post.findUnique({ // [!code ++] where: { id: parseInt(postId) }, // [!code ++] include: { // [!code ++] author: true, // [!code ++] }, // [!code ++] }); // [!code ++] // [!code ++] if (!post) { // [!code ++] throw data("Post Not Found", { status: 404 }); // [!code ++] } // [!code ++] return { post }; // [!code ++] } // [!code ++] export default function Post({ loaderData }: Route.ComponentProps) { const { post } = loaderData; // [!code ++] return (

{post.title}

// [!code ++]

by {post.author.name}

// [!code ++]
{" "} // [!code ++] {post.content || "No content available."} // [!code ++]
{" "} // [!code ++]
); } ``` There's a lot of changes here, so break it down: * You're using Prisma Client to fetch the post by its `id`, which you get from the `params` object. * In case the post doesn't exist (maybe it was deleted or maybe you typed a wrong ID), you throw an error to display a 404 page. * You then display the post's title, content, and author. If the post doesn't have content, you display a placeholder message. It's not the prettiest page, but it's a good start. Try it out by navigating to `localhost:5173/posts/1` and `localhost:5173/posts/2`. You can also test the 404 page by navigating to `localhost:5173/posts/999`. 6. Add a new Posts create page [#6-add-a-new-posts-create-page] To round out your application, you'll add a "create" page for posts. This will allow you to write your own posts and save them to the database. As with the other pages, you'll start with a static page and then update it to be dynamic. ```bash touch app/routes/posts/new.tsx ``` Now, add the following code to the `app/routes/posts/new.tsx` file: ```tsx title="app/routes/posts/new.tsx" import type { Route } from "./+types/new"; import { Form } from "react-router"; export async function action({ request }: Route.ActionArgs) { const formData = await request.formData(); const title = formData.get("title") as string; const content = formData.get("content") as string; } export default function NewPost() { return (

Create New Post