Deeplinking multiple paths for a screen in react-navigation 6+

Question

I have some screens that need to support multiple deep linking paths like this:

export const navigationConfig = {
  prefixes: supportedDeepLinkURLs,
  config: {
    screens: {
      Root: {
        path: '',
        screens: {
          Article: {
             path: [ // This needs to be an array not a string 
                'teams/first-team/content/:id',
                'teams/handball/content/:id',
                'teams/club/content/:id',
            ],
            exact: false
          },
         // ...
        }
     }
    }
  }

Is there any way in react-navigation 6 deeplinking that an array or regex could be provided as a path?

There is an old answer here: react-navigation deep linking with multiple paths

for react-navigation 4 or 5 but I couldn't find anything in react-navigation 6 docs about this.

Any help or suggestion will be greatly appreciated.

Thank you!

Fiston Emmanuel · Accepted Answer · 2022-09-14T14:16:39.733

2

The URL Path is expected to be a string, not an array. A brute force solution, you can add different route names related to FirstTeam, HandBall, and Club as below:

const paths = [
  "teams/first-team/content/:id",
  "teams/handball/content/:id",
  "teams/club/content/:id",
];

function getPathName(path) {
  return path.split("/")[1];
}
function generatePaths(paths) {
  let screenPaths = {};

  paths.forEach((path) => {
    const pathName = getPathName(path);
    screenPaths[pathName] = {
      path,
    };
  });
  
  return screenPaths
}

export const navigationConfig = {
  prefixes: supportedDeepLinkURLs,
  config: {
    screens: {
      Root: {
        path: '',
        screens: {
          ...generatePaths(paths)
        },
        
     }
    }
  }}

const renderDynamicRoutes = () =>
  paths.map((path) => (
    <Stack.Screen
      key={path}
      name={getPathname(path)}
      component={ArticleScreen}
    />
  ))


<Stack.Navigator>
{renderDynamicRoutes}
  {/* other stack navigator routes*/}
</Stack.Navigator>

edited Sep 14 '22 at 14:16

answered Sep 13 '22 at 12:30

Fiston Emmanuel

4,242
1
8
14

Thank you for your answer! This is a solution but would involve a lot of code duplication for me since I have to support 20 paths for this screen and that might increase to 30-40 paths in the near future. – Florin Dobre Sep 13 '22 at 17:56
This is only work-around possible now - https://github.com/react-navigation/react-navigation/blob/main/packages/core/src/types.tsx#L705 – Fiston Emmanuel Sep 13 '22 at 19:11
You can write utility function which can automate code generation. – Fiston Emmanuel Sep 13 '22 at 19:12
1

@FlorinDobre, I update solution with logic to remove boilerplate code – Fiston Emmanuel Sep 14 '22 at 14:18
@Emmanuel! It looks very nice! If there is no other better answer in the next few days I will accept it. Already upvoted. Thanks a lot! – Florin Dobre Sep 15 '22 at 13:12
You can also clone React navigation and add support for multiple paths as Array. – Fiston Emmanuel Sep 15 '22 at 13:51
if your paths are in a pattern you can map variable part to a parameter like ` "teams/:something/content/:id`. just an idea. – Natwar Singh Oct 27 '22 at 17:24

score 1 · Answer 2 · answered Feb 28 '23 at 06:16

You can implement getStateFromPath on the linking configuration and apply any custom handler logic to the path!

For example, you could rewrite your duplicate paths to the configured path before having react navigation produce the nav state, like:

import { 
  getStateFromPath as _getStateFromPath, 
  LinkingOptions 
} from "@react-navigation/native";

const linking: LinkingOptions<ReactNavigation.RootParamList> = {
  prefixes: supportedDeepLinkURLs,
  config: {
    screens: {
      Root: {
        path: '',
        screens: {
          Article: {
            path: 'primary/route/:id',
            exact: false
          },
         // ...
        }
     }
    }
  },
  getStateFromPath: (path, options) => {
    let _path = path;
    // if it matches "/other/route/*" rewrite it to "/primary/route/*"
    if (/^\/other\/route\/\.*/.test(path)) {
      _path = _path.replace(/^\/other\/route\//, "/primary/route/")
    }
    return _getStateFromPath(_path, options)
  },
};

Or, you could implement getStateFromPath to return your own ResultState and take full control of the routing (you can print the output of getStateFromPath to see how this is formatted).

Good luck!

Deeplinking multiple paths for a screen in react-navigation 6+

2 Answers2