反应导航 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”，我会得到“Cannot GET /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 也可以解决问题。