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 (<NavigationContainerlinking={useMemo(() => ({prefixes: [// ...add your URLs hereLinking.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 (<NavigationContainerlinking={useMemo(() => ({prefixes: [// ...add your URLs hereLinking.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.