Redirects

Imagine you want users to enter the URL /@drake, and for it to redirect to the page at /artists/[drake].tsx.

Next.js lets you handle this easily with redirects and rewrites inside of next.config.js

module.exports = {
  async rewrites() {
    return [
      {
        source: '/@:slug',
        destination: '/artists/:slug',
      },
    ]
  },
}

The issue is, this won't work out of the box with React Navigation.

In order to achieve the same, we'll need to edit the linking config.

import { NavigationContainer, getStateFromPath } from '@react-navigation/native'

const linking = {
  // ...your linking config

  getStateFromPath(path, config) {
    const withRewrites = (unparsedPath: string): string => {
      if (unparsedPath.startsWith('/@')) {
        const slug = unparsedPath.replace('/@', '')

        return `artists/${slug}`
      }

      // you can put other redirects here

      return unparsedPath
    }

    const finalPath = withRewrites(path)

    return getStateFromPath(finalPath, config)
  },
}