javascript - 如何解决 react-router v6 Link 元素错误？

Question

我正在尝试构建一个简单的 react-native 应用程序并在我的代码中面临以下问题。如果我删除 <Link>组件并保留 <Text>组件，错误正在消失。如果我尝试保留 <Link>组件并删除 <Text>组件，错误又回来了。
谁能帮我解决这个问题？

import * as React from "react";
import { View, Text } from "react-native";
import { Link } from "react-router-native";

function Home() {
  return (
    <View>
      <Text>Welcome!</Text>
      <Link to="/profile">Visit your profile</Link>
    </View>
  );
}

Error: React.Children.only expected to receive a single React element child.

Answer 1

react-router V6 文档说 <Link>呈现 TouchableHighlight并且它必须至少(和大多数)一个 child ，并且还必须包含在 <View> 中元素。请按如下方式更改您的实现。

import * as React from 'react';
import {View, Text} from 'react-native';
import {Link} from 'react-router-native';

function Home() {
  return (
    <View>
      <Text>Welcome!</Text>
      <Link to="/profile">
        <Text>Visit your profile</Text>
      </Link>
    </View>
  );
}

如果您想覆盖默认样式和行为，请参阅 TouchableHighlight 的 Props 引用.