重新加载页面上的 React-Navigation 未加载错误'Cannot GET /Home' [react-native-web with RN]答案

【问题标题】：React-Navigation on reload page is not getting loaded with error 'Cannot GET /Home' [react-native-web with RN]重新加载页面上的 React-Navigation 未加载错误'Cannot GET /Home' [react-native-web with RN]
【发布时间】：2021-06-05 05:59:08
【问题描述】：

在第一次加载时，当我运行应用程序时，我的页面加载正常，或者我直接将 url 作为 localhost:8080 导航到初始路由 localhost:8080/Home 但只要我重新加载页面或自动重新加载页面就可以重新加载具有特定定义的 URL，例如 localhost:8080/Home 或 localhost:8080/Settings 并失败并出现错误 Cannot GET /Home。

我正在使用带有 RN 的 react-native-web。以下是导航文件的代码：

import 'react-native-gesture-handler';
import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import Home from './src/scence/Home/home';
import Settings from './src/scence/Settings/settings';

const Stack = createStackNavigator();

const linking = {
  prefixes: ['https://localhost:8080'],
  config: {
    screens: {
      Root: {
        path: '/',
        initialRouteName: '/',
        screens: {
          Home: '/',
          Settings: '/settings',
        },
      },
    },
  },
};
const Router = () => {
  return (
    <NavigationContainer linking={linking}>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Settings" component={Settings} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default Router;

我是 react-native-web 的新手，不知道我做错了什么我也在 webpack.config.js 中添加了 react-navigation

const compileNodeModules = [
  // Add every react-native package that needs compiling
  'react-native-gesture-handler',
  'react-native-swipe-gestures',
  'react-native-calendars',
  '@react-navigation/native',
  '@react-navigation/stack',
  'react-navigation',
].map(moduleName => path.resolve(appDirectory, `node_modules/${moduleName}`));

const babelLoaderConfiguration = {
  test: /\.jsx?$/,
  // Add every directory that needs to be compiled by Babel during the build.
  include: [
    path.resolve(__dirname, 'index.web.js'), // Entry to your application
    path.resolve(__dirname, 'router.js'), // Change this to your main App file
    path.resolve(__dirname, 'App.js'), // Change this to your main App file
    path.resolve(__dirname, 'src'),
    path.resolve(__dirname, 'src/assets/images'),

    ...compileNodeModules,
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      presets,
      plugins: ['react-native-web'],
    },
  },
};

【问题讨论】：

标签： reactjs react-native babeljs react-navigation react-native-web

【解决方案1】：

你有想过这个问题吗？

我设法通过将以下内容添加到 webpack.config.js 文件来使开发工作。 devServer: {historyApiFallback: true} 但我仍然不知道如何处理 prod。

【讨论】：