Babel.js React-Navigation on reload page is not getting loaded with error 'Cannot GET /Home' [react-native-web with RN]

rqdpfwrv  于 2023-09-28  发布在  Babel
关注(0)|答案(1)|浏览(155)

在第一次加载我的页面加载时,我运行应用程序或我直接把url作为localhost:8080在导航我到初始路由localhost:8080/主页,但只要我重新加载页面或它自动重新加载页面可以重新加载特定定义的URL,如localhost:8080/主页或localhost:8080/设置,并与错误无法获取/主页失败。

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

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'],
    },
  },
};
vptzau2j

vptzau2j1#

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

相关问题