Page Not Found Error in React App Route

I am getting a page not found error when I navigate away from home page to the games page (see route with error below). I have moved the index.html file to the top level. Please let me know what else I can do.

Site name:
https://arcade-legend.netlify.app/

Route with error: Arcade Legend

Error message: Page Not Found. Looks like you’ve followed a broken link or entered a URL that doesn’t exist on this site.

Build settings:
Runtime

  • Not set

Base directory

  • Not set

Build command

  • npm run build

Publish directory

  • build

Deploy log visibility

  • Logs are public

Build status

  • Active

Build log:
5:24:25 AM: build-image version: 3b96229e32b19cdf63f20dc1fc9331cd240c2d01 (focal)
5:24:25 AM: buildbot version: 3b96229e32b19cdf63f20dc1fc9331cd240c2d01
5:24:25 AM: Fetching cached dependencies
5:24:25 AM: Starting to download cache of 139.2MB
5:24:27 AM: Finished downloading cache in 1.947s
5:24:27 AM: Starting to extract cache
5:24:28 AM: Finished extracting cache in 1.322s
5:24:28 AM: Finished fetching cache in 3.338s
5:24:28 AM: Starting to prepare the repo for build
5:24:28 AM: Preparing Git Reference refs/heads/master
5:24:30 AM: Starting to install dependencies
5:24:30 AM: Python version set to 3.8
5:24:30 AM: Attempting Ruby version 2.7.2, read from environment
5:24:30 AM: Using Ruby version 2.7.2
5:24:31 AM: Started restoring cached go cache
5:24:31 AM: Finished restoring cached go cache
5:24:31 AM: go version go1.19.10 linux/amd64
5:24:31 AM: Using PHP version 8.0
5:24:32 AM: Started restoring cached Node.js version
5:24:32 AM: Finished restoring cached Node.js version
5:24:33 AM: v18.16.0 is already installed.
5:24:33 AM: Now using node v18.16.0 (npm v9.5.1)
5:24:33 AM: Enabling Node.js Corepack
5:24:33 AM: Started restoring cached build plugins
5:24:33 AM: Finished restoring cached build plugins
5:24:33 AM: Started restoring cached corepack dependencies
5:24:33 AM: Finished restoring cached corepack dependencies
5:24:33 AM: No npm workspaces detected
5:24:33 AM: Started restoring cached node modules
5:24:33 AM: Finished restoring cached node modules
5:24:33 AM: Installing npm packages using npm version 9.5.1
5:24:36 AM: up to date, audited 1452 packages in 2s
5:24:36 AM: 235 packages are looking for funding
5:24:36 AM: run npm fund for details
5:24:36 AM: 6 high severity vulnerabilities
5:24:36 AM: To address all issues (including breaking changes), run:
5:24:36 AM: npm audit fix --force
5:24:36 AM: Run npm audit for details.
5:24:36 AM: npm packages installed
5:24:36 AM: Install dependencies script success
5:24:36 AM: Starting build script
5:24:37 AM: Detected 1 framework(s)
5:24:37 AM: “create-react-app” at version “5.0.1”
5:24:37 AM: Section completed: initializing
5:24:38 AM: ​
5:24:38 AM: Netlify Build
5:24:38 AM: ────────────────────────────────────────────────────────────────
5:24:38 AM: ​
5:24:38 AM: ❯ Version
5:24:38 AM: @netlify/build 29.12.1
5:24:38 AM: ​
5:24:38 AM: ❯ Flags
5:24:38 AM: baseRelDir: true
5:24:38 AM: buildId: 64885ff7ee53190e7d0af429
5:24:38 AM: deployId: 64885ff7ee53190e7d0af42b
5:24:38 AM: ​
5:24:38 AM: ❯ Current directory
5:24:38 AM: /opt/build/repo
5:24:38 AM: ​
5:24:38 AM: ❯ Config file
5:24:38 AM: No config file was defined: using default values.
5:24:38 AM: ​
5:24:38 AM: ❯ Context
5:24:38 AM: production
5:24:38 AM: ​
5:24:38 AM: Build command from Netlify app
5:24:38 AM: ────────────────────────────────────────────────────────────────
5:24:38 AM: ​
5:24:38 AM: $ npm run build
5:24:38 AM: > arcade_react@1.0.0 build
5:24:38 AM: > react-scripts build
5:24:39 AM: Creating an optimized production build…
5:24:44 AM: Compiled successfully.
5:24:44 AM:
5:24:44 AM: File sizes after gzip:
5:24:44 AM: 91.99 kB build/static/js/main.7e9f8fc6.js
5:24:44 AM: 1.75 kB build/static/css/main.1c791fc6.css
5:24:44 AM: The project was built assuming it is hosted at /.
5:24:44 AM: Starting post processing
5:24:44 AM: You can control this with the homepage field in your package.json.
5:24:44 AM: The build folder is ready to be deployed.
5:24:44 AM: You may serve it with a static server:
5:24:44 AM: Skipping HTML post processing
5:24:44 AM: npm install -g serve
5:24:44 AM: serve -s build
5:24:44 AM: Find out more about deployment here:
5:24:44 AM: Deployment | Create React App
5:24:44 AM: Post processing - header rules
5:24:44 AM: ​
5:24:44 AM: (build.command completed in 5.8s)
5:24:44 AM: ​
5:24:44 AM: Post processing - redirect rules
5:24:44 AM: Deploy site
5:24:44 AM: ────────────────────────────────────────────────────────────────
5:24:44 AM: ​
5:24:45 AM: Post processing done
5:24:44 AM: Starting to deploy site from ‘build’
5:24:44 AM: Calculating files to upload
5:24:44 AM: 0 new files to upload
5:24:45 AM: Section completed: postprocessing
5:24:44 AM: 0 new functions to upload
5:24:44 AM: Section completed: deploying
5:24:44 AM: Site deploy was successfully initiated
5:24:44 AM: ​
5:24:44 AM: (Deploy site completed in 79ms)
5:24:44 AM: ​
5:24:44 AM: Netlify Build Complete
5:24:44 AM: ────────────────────────────────────────────────────────────────
5:24:44 AM: ​
5:24:44 AM: (Netlify Build completed in 5.9s)
5:24:45 AM: Caching artifacts
5:24:45 AM: Started saving node modules
5:24:45 AM: Finished saving node modules
5:24:45 AM: Started saving build plugins
5:24:45 AM: Finished saving build plugins
5:24:45 AM: Started saving corepack cache
5:24:45 AM: Site is live :sparkles:
5:24:45 AM: Finished saving corepack cache
5:24:45 AM: Started saving pip cache
5:24:45 AM: Finished saving pip cache
5:24:45 AM: Started saving emacs cask dependencies
5:24:45 AM: Finished saving emacs cask dependencies
5:24:45 AM: Started saving maven dependencies
5:24:45 AM: Finished saving maven dependencies
5:24:45 AM: Started saving boot dependencies
5:24:45 AM: Finished saving boot dependencies
5:24:45 AM: Started saving rust rustup cache
5:24:45 AM: Finished saving rust rustup cache
5:24:45 AM: Started saving go dependencies
5:24:45 AM: Finished saving go dependencies
5:24:45 AM: Build script success
5:24:45 AM: Section completed: building
5:24:46 AM: Uploading Cache of size 139.2MB
5:24:47 AM: Section completed: cleanup
5:24:47 AM: Finished processing build request in 22.435s

@nalou See this support guide:

Since your project is react based it’ll be an SPA (Single Page Application), so you’ll need to add the appropriate redirect rule to route all paths to the index.html file.

/* /index.html 200
1 Like