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

小能豆

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

javascript

Edit:

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.

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">

阅读 73

2023-12-01

共1个答案

小能豆

It seems like the issue might be related to how the server handles the client-side routing in a single-page application (SPA) like React. When you click on a <Link> component, React Router updates the URL using the browser’s history API, but if the server is not configured to handle these client-side routes, it might result in a 404 error when you try to access the page directly.

Here are a few things to check and try:

Configure Server for Client-Side Routing: Ensure that your server is configured to handle client-side routing by redirecting all requests to the index.html file. This is typically done to let React Router handle the routing on the client side.

For example, in Express, you can achieve this with the following code:

```
const express = require(‘express’);
const path = require(‘path’);
const app = express();

// … your other middleware and routes

// Serve static assets
app.use(express.static(path.resolve(__dirname, ‘build’)));

// Handle React routing, return all requests to React app
app.get(‘*’, (req, res) => {
res.sendFile(path.resolve(__dirname, ‘build’, ‘index.html’));
});

// … your server listening code
```

Adjust the paths based on your project structure.

BrowserRouter basename: If your app is not deployed at the root of the domain (e.g., it’s hosted at https://example.com/my-app), ensure you have set the basename prop on your BrowserRouter component in your index.js or App.js:

```
import { BrowserRouter } from ‘react-router-dom’;

ReactDOM.render(

,
document.getElementById(‘root’)
);
```

HashRouter: If configuring the server doesn’t solve the issue, you can try using HashRouter instead of BrowserRouter. Replace the BrowserRouter component in your index.js or App.js with HashRouter:

```
import { HashRouter as Router } from ‘react-router-dom’;

ReactDOM.render(

,
document.getElementById(‘root’)
);
```

This uses the URL hash to manage routing and can help avoid issues related to server configuration.

After making these changes, redeploy your app and check if the issue persists. If it’s still not working, there might be other factors specific to your project or deployment environment that need to be investigated.

2023-12-01