Component changing but not URL in react-router-native

Question

When I click on a <Link> tag in my react-native file, the component will change as expected, however URL however does not get updated at all and remains at the base localhost URL.

If I manually go and change the URL to search for the desired route it doesn't change the component but the URL will remain as the URL path I searched for. And when I save the file and the browser refreshes automatically, the URL won't change but the EnterTheApp.js component is rendered again.

Package.json

{
  "name": "client",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "@expo/webpack-config": "~0.16.2",
    "axios": "^0.27.2",
    "expo": "~45.0.0",
    "expo-status-bar": "~1.3.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-material-menu": "^2.0.0",
    "react-native-web": "0.17.7",
    "react-router-native": "^6.3.0",
    "styled-components": "^5.3.5",
    "styled-icons": "^10.45.0",
    "webpack-dev-server": "~3.11.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

App.js

import { View } from "react-native";
import { NativeRouter, Route, Routes, Link } from "react-router-native";

import EnterTheApp from "./components/EnterTheApp";
import SignUp from "./components/SignUp";
import Questions from "./components/Questions";
import Login from "./components/Login";

import Home from "./components/Home";

export default function App() {
  return (
    <>
      <NativeRouter>
        {/* Included inline styles here as if included in .css file, app won't work in android as it doesn't recognize the file path*/}
        <View style={{ fontFamily: "arial" }}>
          <Routes>
            <Route exact path="/" element={<EnterTheApp />} />
            {/* Sign Up and Login Elements */}
            <Route path="/sign-up" element={<SignUp />} />
            <Route path="/questions" element={<Questions />} />
            <Route exact path="/login" element={<Login />} />

            {/* Once Logged In */}
            <Route path="/home" element={<Home />} />
          </Routes>
        </View>
      </NativeRouter>
    </>
  );
}

Part of the EnterTheApp.js file to show the Link tags.

<StyledButtonContainer>
  <StyledButton>
    <Link to="/sign-up">
      <StyledButtonText>Sign Up</StyledButtonText>
    </Link>
  </StyledButton>

  <StyledButton>
    <Link to="/login">
      <StyledButtonText>Login</StyledButtonText>
    </Link>
  </StyledButton>
</StyledButtonContainer>

Answer 1

The react-router-native NativeRouter component is the same as a MemoryRouter. It does not manipulate the browser history (change the path) when you navigate. Instead, it uses memory to remember which component is supposed to be rendered currently. If you would like the path to change, I would export to different files, one index.web.js and the other index.js. In the web version, use a BrowserRouter (from react-router-dom), and in the native (normal) version, use a NativeRouter.

(Note: this should work. I haven't actually had to try this before. I normally use Next.js with React Native for web routing and SSR.)