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

Error: Module 'config' not found by Jest

I have encountered an issue while using Jest to test my api calls file. When running a simple test, I received an error Cannot find module 'config' from 'api.service.js'. This error is related to the import statement at the top of my ap ...

Submitting forms using AJAX in Django

I am getting a 'Not Ajax' response every time I try to submit my form. There must be something small that I'm overlooking... class VideoLikeView(View): def post(self, request): if request.is_ajax(): message = 'Aj ...

RTL mode causing issues with Bootstrap breadcrumb functionality

I'm currently working on integrating a Bootstrap breadcrumb into my next.js application. Everything seems to be functioning correctly when in LTR mode, following the sample code provided in Bootstrap's documentation. However, when attempting to s ...

issue with global context hook substitution not functioning as expected

After successfully implementing a front-end call to an API, I encountered some difficulties: login= useUser() ; const handleSubmit = async (e: any) => { e.preventDefault(); setLoading((loading) => !loading); setResult(''); ...

When using ng-repeat with Angular ui-bootstrap and tabs, the new tab will not be selected if there are no existing tabs present

To showcase the problem I'm facing, please refer to this link: http://codepen.io/pietrofxq/pen/ZLLJdr?editors=1010 Click on "remove tabs" and then on "add tab" The challenge at hand involves using a loop with ng-repeat to display tabs. At times, the ...

What is the most effective way to leverage rxjs for executing multiple asynchronous fetch operations in one go using a forEach strategy?

As a newcomer to React, I have been assigned the task of modifying an existing application that already makes multiple API calls. The current pattern in use is illustrated below. For example, if an action mapperActions.selectPolygon of type CaseReducerActi ...

In search of assistance with a persistent react.js error plaguing my work

I keep encountering an error whenever I run npm start on a new project. Does anyone have any insight on how to resolve this issue? The problem might lie within the project dependency tree rather than being a bug in Create React App. Here is what you can ...

Customize the text displayed on the select box button in a React application

My task involves working with an array of JSON objects structured like this - [ { "country_code": "AF", "country_name": "Afghanistan", "country_flag": " ...

Is there a way for me to assign values to my array within each loop when the inner elements vary?

Every time I work on this JavaScript code, I feel like I'm close to finishing it but then encounter another obstacle. My goal is to extract values from different elements such as <input type="text"> and <select>. Here's the code snipp ...

The error is popping up as I try to deploy my Next.js application on Vercel

warning " > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d0f181c1e095009120d5011121c1914131a501f1c0f3d4f534c534d">[email protected]</a>" has an incorrect peer dependency "react@^16 || ^17" ...

Illuminate the current page

I have been working on a website with around 20 pages that all have a side navigation bar. To make it easier to manage, I decided to centralize the links in a JavaScript (JS) file and include it on each HTML page. This way, any changes can be made quickly ...

Endless loading is experienced when running yarn dev

Encountering an issue with yarn dev while attempting to start localhost. After creating a new next app using npx create-next-app and running yarn dev, everything functions properly. However, upon returning to VS Code, I am unable to proceed as the screen g ...

What is the syntax for declaring a variable in JSX?

I'm working with code that retrieves data from an Apollo Server backend in the format shown below: { name: 'geodude', url: 'https://pokeapi.co/api/v2/pokemon/74/' }, { name: 'graveler', url: 'https://pokeapi.co/api/v ...

Combining various FormGroup types into a single object type in Angular 5

I am currently utilizing the mat-stepper feature from the Angular Material design library. Within my application, I am using 3 separate FormGroups to gather information and send it to a database using the httpClient method. To achieve this, I have defined ...

When utilizing Ref in a functional component, it may lead to obtaining NaN when trying to access the

I encountered a problem when trying to reference the same canvas element in both a class component and a functional component. In the class component, the canvas element is accessed using this.refs.canvas, while in the functional component, I had to use us ...

Leverage information stored in an array within the HandsonTable Angular directive

Some of my columns in a HandsoneTable created using Angular directives are not rendering when I try to use an array as the data source with common array notation (name[0]). I'm unsure if this is supposed to work like this or if I am doing something wr ...

Executing multiple click events using JavaScript

I have recently started learning JavaScript and am experimenting with the following script: <script type="text/javascript"> $(document).ready (function() { $('#apply').click(function() { $('#applyinfo').toggle ...

Interactive Thumbnail Previews

There seems to be an issue with the thumbnail links on my page. The leftmost and rightmost links work fine, but the middle ones are not functioning properly when clicked. The PHP code used to generate these links is the same for all of them, so it's p ...

How can I properly customize and expand upon a Material UI ListItem component?

I'm currently working with TypeScript version 3.4.5 and Material UI version 4.2. I have the following code snippet: interface MyItemProps { name: string; value: string; } function Item({ name, value, ...props }: ListItemProps<'li&apo ...

Encountering the "Error: JSON.parse: unexpected character" when trying to retrieve JSON data using AngularJS

I've been struggling with this issue for the past few days. Every time I attempt to fetch a JSON object using Angular's $http.get method, I encounter the error message "Error: JSON.parse: unexpected character". The JSON data is generated using P ...