React navigation webpack linking "CANNOT GET /..."

Question

I am trying to configure react-navigation for a web app with react native. For that I set up the linking options on a NavigationContainer so that I can access my pages from a browser url, using this code :

const linking = {
  prefixes: ['http://localhost:8080/', 'http://localhost:8080', 'localhost:8080'],
  // prefixes: [prefix],
  config: {
    screens: {
      SignIn: "SignIn",
      SignUp: "SignUp",
      Landing: '*',
    },
  }
};

function AppContainer() {

  return ( 
    <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
      <AppStack.Navigator>
        <AppStack.Screen name="SignIn" component={SignInPage}/>
        <AppStack.Screen name="Landing" component={LandingPage}/>
        <AppStack.Screen name="SignUp" component={SignUpPage}/>
        <AppStack.Screen name="Home" component={HomePage}/>
      </AppStack.Navigator>
    </NavigationContainer>
  );
}

When I go to "http://localhost:8080/", I am redirected to "http://localhost:8080/SignIn" ( which is fine), and the app is working. The problem is that if I go from my browser to "http://localhost:8080/SignIn" I get "Cannot GET /SignIn", and the app is not working...

I am using these versions :

"@react-navigation/bottom-tabs": "^5.11.1",
"@react-navigation/native": "^5.8.9",
"@react-navigation/stack": "^5.12.5",

You don't have a direct route to "http://localhost:8080/Signin". I would add it to the prefixes array — Qrow Saki, Nov 15 '20 at 22:55
Adding "localhost:8080/Signin" or "http://localhost:8080/Signin" to the prefixes array didn't work — Pijean, Nov 15 '20 at 23:23

score 5 · Accepted Answer · answered Nov 20 '20 at 17:00

5

Found a solution on How to tell webpack dev server to serve index.html for any route.

I was using webpack-dev-server, which needs some configurations in the webpack.config.js to map all the url to / and serve the index.html .. These are the configurations :

devServer: {
port: 3000,
historyApiFallback: {
  index: 'index.html'
}

}

Adding the cli option --history-api-fallback also do the trick.

answered Nov 20 '20 at 17:00

Pijean

111
7

I found I had to do both things. Add the `devServer` block AND add `--history-api-fallback` to my CLI invocation. – Jay Koutavas Aug 15 '21 at 00:55
Hi @JayKoutavas , I am using react native web, is there any way to achieve same without moving to webpack ? – keshav Apr 01 '22 at 13:56
@keshav. not that I am aware of. – Jay Koutavas Apr 21 '22 at 13:45
In Dec 2022, adding --history-api-fallback was sufficient to resolve this issue for me. My package.json script for web is now "web": "webpack serve --mode=development --config webpack.config.js --history-api-fallback". – Snowybluesky Dec 15 '22 at 01:24
Does anyone know why you have to add --history-api-fallback? It would almost seem like when you make a change to the URL, the browser does not see the URL, and crashes the webpage. If you prevent the webpage from crashing with --history-api-fallback, then first you are directed to index.html, and then NavigationContainer URL-is-changed event handler gets called and it routes the URL correctly from index.html to the new URL? – Snowybluesky Dec 15 '22 at 01:30
For me, adding `historyApiFallback: true` under devServer worked for me. No changes in the CLI option required. – Utsav Barnwal Feb 21 '23 at 07:02

React navigation webpack linking "CANNOT GET /..."

1 Answers1