Issue with React Routes only occurring in the production website

I'm encountering an issue on my personal website that only occurs in production, but not in my local environment.

Here's the situation:

I have set up the routes as follows

const Routes = () => (
  <Router>
    <Route exact path="/" component={Home} />
    <Route exact path="/works" component={work} />
    <Route exact path="/skills" component={skills} />
  </Router>
)

Locally, I can access all routes and render components for work and skills:

  • http://localhost:3000/
  • http://localhost:3000/work
  • http://localhost:3000/skills

After deploying the code to my domain, I encounter issues accessing these routes:

This is the error message I receive for these routes:

This XML file does not appear to have any style information associated with it. The document tree is shown below.

<Error>
  <Code>NoSuchKey</Code>
  <Message>The specified key does not exist.</Message>
</Error>

I'm unsure of what I'm doing wrong and why this error isn't occurring locally. Any help would be appreciated.

Answer №1

When you opt for using BrowserRouter, you are tapping into the History API, allowing you to write code that communicates the following:

Hello browser. I am about to manipulate the DOM using JavaScript. This will alter the page to mirror what you would see if you were to navigate to /example, enabling you to modify the URL in the address bar and make it bookmarkable.

The issue arises when you state this without implementing the necessary changes on the server end. Upon visiting the webpage on the server, an error occurs as you have not instructed it how to handle that particular URL.

You do have several choices at your disposal:

  • Consider utilizing HashRouter instead
  • Explore options like Next.js or Gatsby to generate static pages for deployment onto the server
  • Look into tools such as Next.js for creating pages through server-side rendering (although this may not be feasible on S3, the current hosting platform you appear to be using, necessitating a switch)
  • Implement a rewriting configuration so that any 404 errors are converted into 200 OK errors, serving up a basic index.html skeleton page to bootstrap your app (though it is advised against due to its interference with regular 404s and negative impact on caching).
    • Similar approach but restricting to known existing pages. This could lead to maintenance challenges as you would need to manually synchronize URLs on the server with any updates made to your application.

Answer №2

  import { BrowserRouter } from "react-router-dom";
   <BrowserRouter>
      <App />
   </BrowserRouter>

I suggest giving this code a try.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Eliminating characteristics and rejuvenating the component

I have divs on my webpage that I want to keep hidden until a specific element is clicked. When trying to hide them, I encountered three options: visibilty: hidden - I didn't like this because the hidden div still took up space in the layout. displa ...

What could be causing the PAGE CSS to malfunction?

I am looking to export HTML text as a word document with A4 size and portrait orientation. My JavaScript currently allows me to export the text, but it appears like a webpage format rather than in A4 or portrait mode. I have tried adding @page CSS styling ...

How can I prevent getting stuck in a never-ending React re-render cycle?

I always believed that placing any form of setState within a useEffect call would lead to an endless re-render loop since the useEffect gets triggered on every render. Surprisingly, in my Next.js application, everything seems to be functioning well without ...

"Implementing responsive design with Material-UI components in React using

It has become quite annoying to constantly see all these warnings related to DOMNesting. No matter what I do, I can't seem to get rid of them completely. Here is a typical example: Warning: validateDOMNesting(...): <table> cannot appear as a des ...

Converting a UUID from a string to an integer in JavaScript

Need help passing a UUID to a function that calls an endpoint to delete a blog. The UUID is in string format like "9ba354d1-2d4c-4265-aee1-54877f22312e" and I'm encountering a TypeError: Cannot create property 'message' on string '9ba35 ...

Trigger a random tune when hovering the mouse

I need help figuring out how to make a fixed image on my page trigger a random sound track when hovered over. The sound could be one of five different tracks. Here is the HTML for my image: <img src="images/Airplane.png" class="Airplane-photo"> Bel ...

Utilizing JavaScript variables imported from an external library in Next.js: A Guide

I am currently working on a Next.js with Typescript website and I am in the process of adding advertisements. The ad provider has given me instructions to embed this JavaScript code on my site: <script src="//m.servedby-buysellads.com/monetization. ...

Pass the ID of the <a> element from one function to another

I am a beginner in javascript/jQuery, so please be patient with me if my question seems too simple for you and too challenging for me. I have a function that I won't post the entire code for because it would make this too lengthy. Another function ...

Combining multiple directories within a single express route with NextJS

I am currently working on a NextJS/Express project to develop a website for sharing articles. Within the pages directory, I have an article page nested under (pages/articles.js). My goal is to set up multiple subdirectories that will redirect to this tem ...

Troubleshooting: jQuery.load function not functioning properly within ASP.NET MVC

I'm facing an issue with my code setup. Currently, I have the following components in different files: @Html.Raw(File.ReadAllText(Server.MapPath("~/Views/Home/index.html"))) This is included in my Razor file. <li><a href="#">Personal Re ...

Step-by-step guide on achieving a radiant glow effect using React Native

I am looking to add a glowing animation effect to both my button and image elements in React Native. Is there a specific animation technique or library that can help achieve this effect? While I have this CSS style for the glow effect, I am uncertain if ...

Issues with visuals in jQuery.animate

I have nearly finished implementing a slide down drawer using jQuery. The functionality I am working on involves expanding the drawer downwards to reveal its content when the handle labeled "show" is clicked, and then sliding the drawer back up when the ha ...

Neglecting the error message for type assignment in the Typescript compiler

Presented here is a scenario I am facing: const customer = new Customer(); let customerViewModel = new CustomerLayoutViewModel(); customerViewModel = customer; Despite both Customer and CustomerLayoutViewModel being identical at the moment, there is no ...

Switching Unicode icon when element is clicked

My form has two inputs - one for text input and the other for submitting, like a button. I have added an icon to the submit button and want it to change when clicked. <input class="searchBtn" id="submit" name="submit" type="submit" value="&#xf002"& ...

Caution in NEXTJS: Make sure the server HTML includes a corresponding <div> within a <div> tag

Struggling with a warning while rendering pages in my Next.js and MUI project. Here's the code, any insights on how to resolve this would be greatly appreciated! import "../styles/globals.scss"; import { AppProps } from "next/app"; ...

"Is there a virtual keyboard available that supports multiple inputs and automatically switches to the next input when the maximum length

Looking to build a virtual keyboard with multiple inputs that automatically switch to the next input field after reaching the maximum length. Currently having an issue where I can only fill the first input and not the second one. Any assistance in resolvin ...

using jquery to fill in fields in a table form

I am currently working with a basic html table that initially has two rows, each containing 2 form fields. Users have the ability to add more rows to the table by following this process: $('a#addRow').click(function() { $('#jTable tr:la ...

Error: The function semrush.backlinks_refdomains does not exist as a valid function

Hey there! So I've been working with the SEMRUSH API and encountered an issue when trying to retrieve data using backlinks_refdomains and backlinks_refips. However, when I called the domain_rank function, it responded in JSON format without any proble ...

NPM: The registry cannot be found

npm http GET https://registry.npmjs.org/n npm ERR! Error: failed to fetch from registry: n npm ERR! at /usr/share/npm/lib/utils/npm-registry-client/get.js:139:12 npm ERR! at cb (/usr/share/npm/lib/utils/npm-registry-client/request.js:31:9) npm ERR ...

Adding Google Map V3 markers dynamically through jQuery

I have been using jquery and the Google Maps V3 API to dynamically add markers to my Google Maps. Whenever I click on the button search_button, an AJAX request is sent to the server, which returns a JSON array of LatLng values corresponding to the results. ...