React 导航 webpack 链接 "CANNOT GET /..."

Question

我正在尝试使用 React Native 配置 Web 应用程序的 React-Navigation。为此，我在 NavigationContainer 上设置了链接选项，以便我可以使用以下代码从浏览器 url 访问我的页面：

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>
  );
}

当我转到“http://localhost:8080/”时，我被重定向到“http://localhost:8080/SignIn”（没问题），应用程序正在运行。问题是，如果我从浏览器转到“http://localhost:8080/SignIn”，我会收到“无法获取/登录”，并且应用程序无法运行...

我正在使用这些版本：

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

Answer 1

在 How to tell webpack dev server to serve index.html for any route 上找到了解决方案。

我正在使用 webpack-dev-server，它需要在 webpack.config.js 中进行一些配置以将所有 url 映射到 / 并为 index.html 提供服务。这些是配置:

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

}

添加 cli 选项 --history-api-fallback 也能达到目的。

React 导航 webpack 链接 "CANNOT GET /..."

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

react-native

react-navigation

webpack-dev-server

deep-linking

react-native-web