How to specify base URL path for react navigation Web?

Question

I am building a react-native app that uses @react-navigation.

Currently the goal is to host it on the path from our website. Eg: https://mywebsite/app

However when I deploy my app, it goes to 404 page, using <Link to/> component I can go to home page from the 404, which brings me to the root url https://mywebsite

Here's my linking set up

const linking = {
  prefixes: ["http://localhost*", "https://mywebsite/app"],
  config: {
    screens: {
      HomeScreen: {...},
      NotFound: "*",
    },
  },
};

Any way to make it work from a bath rather than a root?

I have found a similar question with no activity: https://stackoverflow.com/questions/66728161/integrate-react-native-web-into-django-how-to-add-a-prefix-to-all-urls — Ruslan, Mar 24 '22 at 06:14

score 1 · Answer 1 · answered Mar 25 '22 at 01:26

Ok so i got it working using this:

const linking = {
  prefixes: ["http://localhost*", "https://mywebsite/app"],
  config: {
    screens: {
      HomeStack: {
        path: "/app",
        screens: {
           HomeScreen: {...},
        }
      },
      NotFound: "*",
    },
  },
};

Essentially make a top level navigation stack that houses all the screens, mount the stack to the desired path

How to specify base URL path for react navigation Web?

1 Answers1