文章/答案/技术大牛

发布

社区首页 >问答首页 >如何解决反应路由器v6链接元素错误？

问如何解决反应路由器v6链接元素错误？
EN

Stack Overflow用户

提问于 2021-12-22 10:14:24

回答 2查看 207关注 0票数 4

我正在尝试构建一个简单的反应本机应用程序，并在我的代码中面对以下问题。如果删除<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元素子元素。

javascript

reactjs

react-native

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-12-22 10:56:02

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的道具引用。

票数 2

Stack Overflow用户

发布于 2021-12-22 10:30:51

在v6 react路由器中，<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>
  );
}

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70447411

复制

相似问题

问如何解决反应路由器v6链接元素错误？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何解决反应路由器v6链接元素错误？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何解决反应路由器v6链接元素错误？
EN