反应导航 webpack 链接"CANNOT GET /..."

Question

我正在尝试为具有react native的web应用程序配置react导航。为此，我在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

找到了一个关于如何告诉webpack-dev服务器为任何路由提供index.html的解决方案。

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

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

}

添加cli选项--historyAPI回退也可以实现此功能。