How do i resolve the react-router v6 Link element error?

user_17739110 0
Viewed 170

I am trying to build a simple react-native application and facing the following issue in my code. If I remove the <Link> component and keep the <Text> component, error is going away. If I try to keep the <Link> component and remove the <Text> component, error comes back.

Can anyone please help me with this?

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.

react-native reactjs javascript
2 Answers

In v6 react-router, The <Link> should have exactly 1 element. But in your case, The text Visit, your and profile is being assumed as 3 text nodes.

To make it as one element, You can simply wrap it into <Text>. So the <Link> will have only one <Text> element but that has 3 text nodes inside which is not a problem to <Link>

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

The react-router V6 docs say that <Link> renders a TouchableHighlight and it must have at least (and most) one child and also must be wrapped in a <View> element. Please change your implementation as follows.

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>
  );
}

If you want to override default styling and behavior, please refer to the Props reference for TouchableHighlight.

user_35902370
Related