CODEWITHSUNDEEP
reactjsreact-nativereact-router
major697
major697

Reputation: 1862

React native and React router native v6

I have: react-router-native: 6.2.1.

I have an components: App.js:

const App = () => (
  <NativeRouter>
    <RoutesView />
  </NativeRouter>
)

RoutesView.js:

const RoutesView = () => (
  <Routes>
    <Route path="/" element={<Menu />}>
      <Route path="/add" element={<AddPurchases />} />
    </Route>
  </Routes>
)

and Menu.js:

const Menu = () => (
  <View>
    <Text>Welcome!</Text>
    <Link to="/profile">Visit your profile</Link>
  </View>
)

React return me error:

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

When I remove <Link to="/profile">Visit your profile</Link> application work corretly. Why I can't using <Link /> inside <Route />? How I can fix it?

Upvotes: 1

Views: 1484

Answers (3)

Kristhyan Zubia
Kristhyan Zubia

Reputation: 1

In React Native you have to put the text into a Text tag. It not necessary add a View tag

const Menu = () => (
  <View>
    <Text>Welcome!</Text>
    <Link to="/profile">
      <Text> Visit your profile </Text>
    </Link>
  </View>
)

Upvotes: 0

Ismail Iqbal
Ismail Iqbal

Reputation: 2580

const Menu = () => (
  <View>
    <Text>Welcome!</Text>
    <Link to="/profile">
       <View>
         <Text>Visit your profile</Text>
       </View>
   </Link>
  </View>
)

Wrap the Plain text with view and a text tag it should work

more info found on the issue link

Upvotes: 1

Rhett Harrison
Rhett Harrison

Reputation: 432

Try this:

export const Menu = () => (
    <View>
      <div className="wrapper">
        <Text>Welcome!</Text>
        <Link to="/profile">Visit your profile</Link>
      </div>
    </View>
);

I'm not sure what the View does but I know React like to only return a single element so I wrapped it in a single div element

Upvotes: 1

Related Questions