Ссылка nextjs не работает в пользовательском компоненте

avatar
DilipCoder
8 августа 2021 в 20:21
370
0
0

когда я включаю этот пакет, а затем добавляю ссылку в компонент моей страницы, это дает мне ошибку. при этом отлично работает в экспо-клиенте. здесь я хочу использовать пакет expo-next-react-navigation. ссылка на ошибку https://github.com/nandorojo/expo-next-react-navigation/issues/72

Ошибка enter image description here

bug

Package.json

{
  "dependencies": {
    "@react-navigation/native-stack": "^6.0.3",
    "expo": "~42.0.0",
    "expo-next-react-navigation": "^1.1.14",
    "next": "^11.0.1",
    "next-offline": "^5.0.5",
    "next-optimized-images": "^2.6.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-safe-area-context": "3.2.0",
    "react-native-screens": "~3.4.0",
    "react-native-web": "^0.17.1",
    "setimmediate": "^1.0.5"
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@expo/next-adapter": "^3.0.1",
    "@types/react": "^17.0.16",
    "@types/react-native": "^0.64.12",
    "eslint": "^7.32.0",
    "eslint-config-next": "^11.0.1",
    "next-compose-plugins": "^2.2.1",
    "next-transpile-modules": "^8.0.0",
    "typescript": "^4.3.5",
    "webp-loader": "^0.6.0"
  },
  "scripts": {
    "start": "next dev",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "build": "next build",
    "next-lint": "next lint"
  },
  "private": true
}

` .eslintrc

{
    "extends": ["next", "next/core-web-vitals"]
  }

конфигурация Babel

module.exports = { presets: ['@expo/next-adapter/babel'] };

пользовательский компонент

const Link = React.forwardRef(function Link(props, ref) {
    const { nextLinkProps = empty.object, style, params = empty.object, children, isText = true, web, } = props;
    const query = useMemo(() => ({ ...params }), [params]);
    const webPath = web?.path?.[0] === '/' ? web?.path?.slice(1) : web?.path;
    const pathname = `/${webPath ?? props.routeName}`;
    const href = useMemo(() => ({
        query,
        pathname,
    }), [pathname, query]);
    return (<NextLink passHref {...nextLinkProps} href={href} as={web?.as} prefetch={web?.prefetch} scroll={web?.scroll} replace={web?.replace} shallow={web?.shallow}>
        {isText ? (<Text ref={ref} accessibilityRole="link" style={style}>
            {children}
          </Text>) : (<View accessibilityRole="link" style={style}>
            {children}
          </View>)}
      </NextLink>);
});
export default Link;
Источник

Ответы (0)