反应导航 webpack 链接“CANNOT GET /...”

Posted 2023-02-21

【中文标题】反应导航 webpack 链接“CANNOT GET /...”

【英文标题】：React navigation webpack linking "CANNOT GET /..."

【发布时间】：2021-02-27 05:04:54

【问题描述】：

我正在尝试为带有 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",

【问题讨论】：

您没有到“localhost:8080/Signin”的直接路由。我会将它添加到前缀数组中

将“localhost:8080/Signin”或“localhost:8080/Signin”添加到前缀数组不起作用

【参考方案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 也可以解决问题。

【讨论】：

我发现我必须同时做这两件事。添加 devServer 块并将 --history-api-fallback 添加到我的 CLI 调用中。