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

【问题标题】：如何解决 react-router v6 Link 元素错误？
【发布时间】：2022-01-23 13:56:44
【问题描述】：

我正在尝试构建一个简单的 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>
  );
}

错误：React.Children.only 期望接收单个 React 元素孩子。

【问题讨论】：

通过查看 react router native 的文档，您似乎必须将 Visit your profile 包装在 <Text> 元素中，就像您在上面所做的那样。编辑：上述文档的链接：v5.reactrouter.com/native/api/Link ||进一步解释：似乎 Node 将 Visit、your 和 profile 解释为 3 个不同的元素（甚至不是 React 元素，因此错误的精度）。
谢谢@GaëtanBoyals

标签： javascript reactjs react-native

【解决方案1】：

react-router V6 文档说<Link> 呈现TouchableHighlight 并且它必须至少（和大多数）一个孩子并且还必须包含在<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 参考。

【讨论】：

【解决方案2】：

在 v6 react-router 中，<Link> 应该只有 1 个元素。但在您的情况下，文本 Visit、your 和 profile 被假定为 3 个文本节点。

要使其成为一个元素，您可以简单地将其包装成<Text>。所以<Link> 将只有一个<Text> 元素，但里面有3 个文本节点，这对<Link> 来说不是问题

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

【讨论】：

非常感谢。这对我很有帮助。