Question 300292 in React native Question posted in
The official React Native documentation can be found here.

React native – React Router <Link> Not Working when running npm build and serving, but is when running npm start

Edit:

Just tested this example with serving build, and it works fine…

Minimally reproducible example:
https://codesandbox.io/p/sandbox/serene-haze-6fxg6l?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clpmldzcu0006356aml80ufpn%2522%252C%2522sizes%2522%253A%255B71.25223613595706%252C28.747763864042938%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clpmldzcu0002356aeqyt0kb1%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clpmldzcu0003356apewmu0av%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clpmldzns000i356aksyw1dkd%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B51.63757811%252C48.36242189%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clpmldzns000i356aksyw1dkd%2522%253A%257B%2522id%2522%253A%2522clpmldzns000i356aksyw1dkd%2522%252C%2522activeTabId%2522%253A%2522clpmn6s0s01f3356aam0gojvk%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522id%2522%253A%2522clpmn6s0s01f3356aam0gojvk%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%2522%257D%255D%257D%252C%2522clpmldzcu0002356aeqyt0kb1%2522%253A%257B%2522id%2522%253A%2522clpmldzcu0002356aeqyt0kb1%2522%252C%2522tabs%2522%253A%255B%255D%257D%252C%2522clpmldzcu0003356apewmu0av%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clpmldzcu0003356apewmu0av%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

This works only for the home and about pages, but shows how it works for the whole site. As you can see, it works fine, as it does locally for me.

For every page there is a conditional rendering of the landing page vs standard navbar via the Header component:

import React from 'react';
import '../css/AboutUsPage.css';
import AboutUs from "../components/AboutUs";
import LPHeader from "../components/LPHeader";
import Header from "../components/Header";
import AuthService from "../services/AuthService";

const AboutUsPage = () => {
    const isLoggedIn = AuthService.isLoggedIn();
    return (
        <div>
            { isLoggedIn ? <Header /> : <LPHeader /> }
            <AboutUs />
        </div>
    );
};

export default AboutUsPage;

import LPNavBar from "./LPNavBar";

const LPHeader = () => {
    return (
        <div>
            <LPNavBar />
        </div>
    );
};

export default LPHeader;

Also when I tried with the native from react-router-dom:

import React from "react";
import { LinkContainer } from 'react-router-bootstrap';
import {Navbar, Nav, Image} from 'react-bootstrap';
import logo from '../assets/logo.svg';
import { Link } from 'react-router-dom';
import '../css/Navbar.css';

const LPNavBar = () => {
    return (
        <div>
            <Link to="/about">About native link </Link>
            <Navbar expand="lg" style={{backgroundColor: "#286491"}}>
                <LinkContainer to="/home">
                    <Navbar.Brand className="navbar-brand-margin custom-logo">
                        <Image
                            src={logo}
                            width="30"
                            height="30"
                            className="d-inline-block align-top"
                        />
                    </Navbar.Brand>
                </LinkContainer>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />

But, this had the same issue, and only changed the value of the URL.

After testing through running ‘npm run build’ and then serving that locally with ‘serve -s build’ I realised the Nav Links from react-router don’t work, but when using ‘npm start’ the Nav Links work fine. This means it was not an issue with Vercel or any kind of production configuration. But I can’t figure out why this difference is – my app only contains a .env file with

REACT_APP_API_URL=https://seeds-74hg79bfb37d.herokuapp.com

#REACT_APP_API_URL=http://localhost:8080

and no other environment variables are used on the frontend that could be affected by dev vs production. I’ve also tried changing my "homepage": ".", to a dot, and just "". The thing is, the routing works, since I click on it -> /about nothing happens, but when I refresh it works and it brings up the AboutPage component.

I also thought it could be service workers, but that lead to nothing seeing as there is no ServiceWorkers.js file or anything similar in the build directory, or in the service workers tab in applications tab of console.

I’ve deployed a React application on Vercel, and I’m encountering an issue where <Link> components from react-router-dom are not functioning as expected. When I click on these links, the URL changes, but the page content does not update. This issue is not present in my local development environment, where navigation works correctly.

The issue occurs only in the production build on Vercel and when I click on a <Link> it changes the URL but does not navigate to the new page, and no network requests or console errors appear when I click on the links.

  1. Navbar Component (using <LinkContainer> from react-router-bootstrap):
import React from "react";
import { LinkContainer } from 'react-router-bootstrap';
import {Navbar, Nav, Image} from 'react-bootstrap';
import logo from '../assets/logo.svg';

import '../css/Navbar.css';

const LPNavBar = () => {
    return (
        <Navbar expand="lg" style={{backgroundColor: "#286491"}}>
            <LinkContainer to="/home">
                <Navbar.Brand className="navbar-brand-margin custom-logo">
                    <Image
                        src={logo}
                        width="30"
                        height="30"
                        className="d-inline-block align-top"
                        alt="Logo"
                    />
                </Navbar.Brand>
            </LinkContainer>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav" className="justify-content-end">
                <Nav>
                    <LinkContainer to="/">
                        <Nav.Link className="nav-link nav-link-text">Home</Nav.Link>
                    </LinkContainer>
                    <LinkContainer to="/about">
                        <Nav.Link className="nav-link nav-link-text">About</Nav.Link>
                    </LinkContainer>
                    <LinkContainer to="/sign-up">
                        <Nav.Link className="nav-link nav-link-text">Register</Nav.Link>
                    </LinkContainer>
                    <LinkContainer to="/login">
                        <Nav.Link className="nav-link nav-link-margin nav-link-text">Login</Nav.Link>
                    </LinkContainer>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    );
};

export default LPNavBar;





AppRouter: 

    import React from 'react';
    import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
    
    import HomePage from './pages/HomePage';
    import UserProfilePage from './pages/UserProfilePage';
    import LandingPage from './pages/LandingPage';
    ... other imports
    import PaymentCancelledPage from "./pages/PaymentCancelledPage";
    import ContactPage from "./pages/ContactPage";
    
    const AppRouter = () => {
        return (
            <Router>
                <Routes>
                    <Route path="/" element={<LandingPage />} />
                    <Route path="/home" element={<HomePage />} />
                    <Route path="/profile/:userId" element={<UserProfilePage />} />
                    ...
                    <Route path="/payment-cancelled" element={<PaymentCancelledPage />} />
                    <Route path="/contact" element={<ContactPage />} />
                </Routes>
            </Router>
        );
    };
    
    export default AppRouter;

And the truly perplexing thing is that in my project's root directory on Github repo, in the branch connected to Vercel there is the vercel.json file 
that should resolve this problem: 


    .idea
    public
    src
    .env
    .env.production
    .gitignore
    README.md
    htmltos.txt
    package-lock.json
    package.json
    tsandcs.txt
    vercel.json

,     vercel.json:

      {
      "rewrites":  [
        {"source": "/(.*)", "destination": "/"}
      ]
    },

There is no console output, or network requests when clicking on any of the navlinks. The only thing that changes, is the URL correctly, but the state doesn't change/no redirect.  


The url could be / for the home page, and then I click About and the url becomes /about but nothing else changes. However, React Router works for all other parts, if I type /about it redirects to the /about route that is defined in the AppRouter.js file.
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Updating my dependencies for react-rootstrap and react-rooter-dom fixed this issue.


  2. 0

    "I’ve deployed a React application on Vercel, and I’m encountering an issue where components from react-router-dom are not functioning as expected. When I click on these links, the URL changes, but the page content does not update. This issue is not present in my local development environment, where navigation works correctly."

    I can think of two things: the first is that your code has an error and react doesn’t show it on the screen. But if you press f12 and analyze the console log, the error will be displayed.

    The second is a problem with the router. When I do a deployment on github pages using react with vite, I configure my vite.config.js to redact a URL that doesn’t exist in the context of github.

    The wrong way around:

    export default defineConfig({
  plugins: [react()],
  base: "/Miniblog"
})

    The correct way:

    export default defineConfig({
  plugins: [react()],
  base: "[github url] / [Your profile name] /Miniblog"
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search