---
title: Dynamic Routing in React
description: Learn how to enable dynamic rendering of new stories by setting up a catch-all route in React.
url: https://storyblok.com/docs/guides/react/dynamic-routing
---

# Dynamic Routing in React

Set up a catch-all route strategy in your React project to render new stories dynamically.

## Setup

Install the `react-router` package in the terminal.

```bash
npm install react-router
```

## Fetch a story dynamically

Modify the `App.jsx` file to fetch any story within your Space.

src/App.jsx

```javascript
import { StoryblokComponent, useStoryblok } from '@storyblok/react';
import { useParams } from 'react-router';

export default function App() {
   const params = useParams();
   const slug = params['*']
   const story = useStoryblok(slug || 'home', {
   const story = useStoryblok('home', {
    version: 'draft',
  });

  if (!story?.content) {
    return <div>Loading...</div>;
  }
  return <StoryblokComponent blok={story.content} />;
}
```

Get the `slug` from the current route, making an exception for our home story to be `/`.

## Render all stories

Update `main.jsx` to use React Router.

With this approach, your project can automatically handle new stories you add to your Space.

src/main.jsx

```javascript
 import { createBrowserRouter, RouterProvider } from 'react-router';
import {createRoot} from 'react-dom/client';
import { StrictMode } from 'react';
import './index.css';
import App from "./App"
import { storyblokInit, apiPlugin } from '@storyblok/react';

import Page from './storyblok/Page';
import Teaser from './storyblok/Teaser';
import Feature from './storyblok/Feature';
import Grid from './storyblok/Grid';

storyblokInit({
  accessToken: import.meta.env.VITE_STORYBLOK_ACCESS_TOKEN,
  use: [apiPlugin],
  components: {
    page: Page,
    teaser: Teaser,
    feature: Feature,
    grid: Grid
  },
  apiOptions: {
    region: 'eu', // "eu" is the default region
  },
});

 const router = createBrowserRouter([
 {
    path: '/*',
    Component: App,
  }
]);

const root = document.getElementById('root');

createRoot(root).render(
  <StrictMode>
    <RouterProvider router={router} />
    <App />
  </StrictMode>
);
```

## Related resources

[React Router](https://reactrouter.com/)

[Content Delivery API: Retrieve a Single Story](/docs/api/content-delivery/v2/stories/retrieve-a-single-story)

[Content Delivery API: Retrieve Multiple Stories](/docs/api/content-delivery/v2/stories/retrieve-multiple-stories)

  

## Pagination

-   [Previous: Visual Preview in React](/docs/guides/react/visual-preview)
-   [Next: Content Modeling in React](/docs/guides/react/content-modeling)