React native router (V6) is not routing to a different page based on the endpoint, instead shows the same page for both routes

Question

import {NativeRouter, Route, Routes} from 'react-router-native';
import Loader from  '../components/Loader';
import Home from '../components/Home';

export default function RoutingFunc(){
  return(
    <NativeRouter>
      <Routes>
        <Route path='/home' element={<Home />} />
        <Route path='/' element={<Loader />} />
      </Routes>
    </NativeRouter>
  )
}

For both the routes / and /home ,the Loader component is being rendered

Loader Component

import { Box, Flex, Heading,Text } from "native-base";
import {Image} from 'react-native';

export default function Loader(){
  console.log(window.location.href)
  return(
    <Flex flexDirection="column" 
    justifyContent="center" 
    alignItems="center" 
    h="100%" 
    w="100vw"
    position="relative"
    backgroundColor="#25A9B0">
      <Heading color="white" fontSize="5xl">page<Text color="#05386B">in</Text></Heading>
      <Box position="absolute"
      top="55%"
      left="46%"
      backgroundColor="#36BAC2"
      w="45"
      h="45"
      borderRadius="full"
      borderColor="#05386B"
      borderWidth="2">
      </Box>
      <Box position="absolute"
      top="58%"
      left="49%"
      backgroundColor="#36BAC2"
      w="45"
      h="45"
      borderRadius="full"
      borderColor="#05386B"
      borderWidth="2">
      </Box>
      <Image source={require('../../resource/logo1.png')} />
      {/* <Text position="absolute" bottom="5%" fontSize="md">Randomized Text</Text> */}
    </Flex>
  )
}

Home Component

import {View,Text,Dimensions} from "react-native";
import Posts from "./Posts";
import Footer from "./Footer";

export default function Home() {
    return (
        <>
         <View 
         style={{display:'flex',
         justifyContent:'center',
         width:'100%',
         height:`${Dimensions.get('window').height}px`,
         flexDirection:"column",
         overflow:'scroll'}}>
           <Posts/>
         </View>
         <Footer/>
        </>
        
    )
}

Answer 1

I think the / is superfluous now for everything but the home route so what happens if you try the path (/home) without /. The matching logic in v6 has improved, so perhaps the below, and it will automatically match the most specific:

   <NativeRouter>
      <Routes>
        <Route path='home' element={<Home />} />
        <Route path='/' element={<Loader />} />
      </Routes>
    </NativeRouter>