Skip to main content

Create a dynamic route

Next.js lets you create dynamic routes by using bracket syntax in files inside of pages.

For example, apps/next/pages/users/[id].tsx would let you link to /users/123 on the website, where the id parameter will be 123.

Creating a dynamic route with Solito is the same as creating a static route, except that your linking config from step 4 needs to add the dynamic parameter.

Example​

Referencing the starter monorepo, open packages/app/provider/navigation/index.tsx.

All you need to do is add 'user-detail': 'users/:id' to your screens, assuming you've already followed the steps for creating a route:

While Next.js uses users/[id] syntax, React Navigation uses users/:id.

tsx
import { NavigationContainer } from '@react-navigation/native'
import * as Linking from 'expo-linking'
import { useMemo } from 'react'
export function NavigationProvider({
children,
}: {
children: React.ReactNode
}) {
return (
<NavigationContainer
linking={useMemo(
() => ({
prefixes: [
// ...add your URLs here
Linking.createURL('/'),
],
config: {
initialRouteName: 'home',
screens: {
home: '',
'user-detail': 'users/:id',
},
},
}),
[]
)}
>
{children}
</NavigationContainer>
)
}
tsx
import { NavigationContainer } from '@react-navigation/native'
import * as Linking from 'expo-linking'
import { useMemo } from 'react'
export function NavigationProvider({
children,
}: {
children: React.ReactNode
}) {
return (
<NavigationContainer
linking={useMemo(
() => ({
prefixes: [
// ...add your URLs here
Linking.createURL('/'),
],
config: {
initialRouteName: 'home',
screens: {
home: '',
'user-detail': 'users/:id',
},
},
}),
[]
)}
>
{children}
</NavigationContainer>
)
}

On the Next.js side, you should have a file at apps/next/pages/users/[id].tsx that exports the same screen.

Recursive Routes

In order to properly navigate recursive routes, you will need to implement React Navigation's getId attribute on the affected screens.