1

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>
Drew Reese
  • 165,259
  • 14
  • 153
  • 181
Harry Harrison
  • 11
  • 3
  • Nothing overtly seems to an issue in the code you've shared. Think you could create a running [codesandbox](https://codesandbox.io/) or [Expo Snack](https://snack.expo.dev/) that reproduces this issue that we could inspect and debug live? – Drew Reese May 18 '22 at 16:26
  • Hi Drew, never used Expo Collaboration before but here's the link: https://snack.expo.dev/G7m37lcT0- 2 of the dependencies in the package.json file couldn't be resolved so I've moved them to the App.js file and commented them out at the bottom. – Harry Harrison May 19 '22 at 09:27
  • Can you clarify more precisely the issue and how you are debugging/testing things? You describe editing the URL in the address bar, but native apps won't typically have a browser address bar. As far as I am aware, the native router is is a `MemoryRouter` under the hood, with some extra back navigation logic. – Drew Reese May 19 '22 at 09:44
  • Ah, that's probably where I'm going wrong. I was just editing it in the browser, the emulators won't work on my laptop at the moment, I just get an error saying "Error opening simulator, check logs for details" but the logs are blank. I'll try to get them working first and then work on the router issue. – Harry Harrison May 19 '22 at 09:49

1 Answers1

0

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.)

ztcollazo
  • 159
  • 1
  • 8