Routing working locally but not when hosted by Netlify

Support
, ,
1

Here is the name of my app:

isoc-website.netlify.app

My build works and the root directory ‘/’ works, but I have a few subdirectories that you can see here:

image
image898×361 14.9 KB

and none of the subdirectories work, only the root.

and finally I have no errors or warnings in my build, here is the build log:

7:32:15 AM: build-image version: d7b3813f01c06610bc1723ff1b22446513ee7941 (focal)
7:32:15 AM: build-image tag: v4.14.3
7:32:15 AM: buildbot version: f2613f2234a773b4fab58b5a3c03c743fe78f9bf
7:32:15 AM: Fetching cached dependencies
7:32:15 AM: Starting to download cache of 144.3MB
7:32:16 AM: Finished downloading cache in 1.384825396s
7:32:16 AM: Starting to extract cache
7:32:19 AM: Finished extracting cache in 2.217880408s
7:32:19 AM: Finished fetching cache in 3.650145325s
7:32:19 AM: Starting to prepare the repo for build
7:32:19 AM: Preparing Git Reference refs/heads/master
7:32:19 AM: Parsing package.json dependencies
7:32:20 AM: Starting build script
7:32:20 AM: Installing dependencies
7:32:20 AM: Python version set to 2.7
7:32:21 AM: Started restoring cached node version
7:32:21 AM: Finished restoring cached node version
7:32:21 AM: v16.18.0 is already installed.
7:32:22 AM: Now using node v16.18.0 (npm v8.19.2)
7:32:22 AM: Enabling node corepack
7:32:22 AM: Started restoring cached build plugins
7:32:22 AM: Finished restoring cached build plugins
7:32:22 AM: Attempting ruby version 2.7.2, read from environment
7:32:23 AM: Using ruby version 2.7.2
7:32:23 AM: Using PHP version 8.0
7:32:23 AM: No npm workspaces detected
7:32:23 AM: Started restoring cached node modules
7:32:23 AM: Finished restoring cached node modules
7:32:23 AM: Started restoring cached go cache
7:32:23 AM: Finished restoring cached go cache
7:32:23 AM: Installing Go version 1.17 (requested 1.17)
7:32:28 AM: unset GOOS;
7:32:28 AM: unset GOARCH;
7:32:28 AM: export GOROOT=‘/opt/buildhome/.gimme/versions/go1.17.linux.amd64’;
7:32:28 AM: export PATH=“/opt/buildhome/.gimme/versions/go1.17.linux.amd64/bin:${PATH}”;
7:32:28 AM: go version >&2;
7:32:28 AM: export GIMME_ENV=“/opt/buildhome/.gimme/env/go1.17.linux.amd64.env”
7:32:28 AM: go version go1.17 linux/amd64
7:32:28 AM: Installing missing commands
7:32:28 AM: Verify run directory
7:32:29 AM: ​
7:32:29 AM: ────────────────────────────────────────────────────────────────
7:32:29 AM: Netlify Build
7:32:29 AM: ────────────────────────────────────────────────────────────────
7:32:29 AM: ​
7:32:29 AM: ❯ Version
7:32:29 AM: @netlify/build 28.1.4
7:32:29 AM: ​
7:32:29 AM: ❯ Flags
7:32:29 AM: baseRelDir: true
7:32:29 AM: buildId: 635e287d621ff10008382060
7:32:29 AM: deployId: 635e287d621ff10008382062
7:32:29 AM: ​
7:32:29 AM: ❯ Current directory
7:32:29 AM: /opt/build/repo
7:32:29 AM: ​
7:32:29 AM: ❯ Config file
7:32:29 AM: No config file was defined: using default values.
7:32:29 AM: ​
7:32:29 AM: ❯ Context
7:32:29 AM: production
7:32:29 AM: ​
7:32:29 AM: ────────────────────────────────────────────────────────────────
7:32:29 AM: 1. Build command from Netlify app
7:32:29 AM: ────────────────────────────────────────────────────────────────
7:32:29 AM: ​
7:32:29 AM: $ npm run build
7:32:29 AM: > isoc-website@0.1.0 build
7:32:29 AM: > react-scripts build
7:32:30 AM: Creating an optimized production build…
7:32:38 AM: Compiled successfully.
7:32:38 AM:
7:32:38 AM: File sizes after gzip:
7:32:39 AM: 170.25 kB build/static/js/main.7c9208f6.js
7:32:39 AM: 1.78 kB build/static/js/787.91663f77.chunk.js
7:32:39 AM: Creating deploy upload records
7:32:39 AM: 1.44 kB build/static/css/main.f8276bfa.css
7:32:39 AM: The project was built assuming it is hosted at /.
7:32:39 AM: You can control this with the homepage field in your package.json.
7:32:39 AM: The build folder is ready to be deployed.
7:32:39 AM: You may serve it with a static server:
7:32:39 AM: npm install -g serve
7:32:39 AM: serve -s build
7:32:39 AM: Find out more about deployment here:
7:32:39 AM: Starting post processing
7:32:39 AM: Deployment | Create React App
7:32:39 AM: ​
7:32:39 AM: (build.command completed in 9.4s)
7:32:39 AM: Post processing - HTML
7:32:39 AM: ​
7:32:39 AM: ────────────────────────────────────────────────────────────────
7:32:39 AM: 2. Deploy site
7:32:39 AM: Post processing - header rules
7:32:39 AM: ────────────────────────────────────────────────────────────────
7:32:39 AM: ​
7:32:39 AM: Starting to deploy site from ‘build’
7:32:39 AM: Post processing - redirect rules
7:32:39 AM: Creating deploy tree
7:32:39 AM: 0 new files to upload
7:32:39 AM: 0 new functions to upload
7:32:39 AM: Post processing done
7:32:39 AM: Site deploy was successfully initiated
7:32:39 AM: ​
7:32:39 AM: (Deploy site completed in 194ms)
7:32:39 AM: ​
7:32:39 AM: ────────────────────────────────────────────────────────────────
7:32:39 AM: Netlify Build Complete
7:32:39 AM: ────────────────────────────────────────────────────────────────
7:32:39 AM: ​
7:32:39 AM: (Netlify Build completed in 9.6s)
7:32:39 AM: Caching artifacts
7:32:39 AM: Started saving node modules
7:32:39 AM: Finished saving node modules
7:32:39 AM: Started saving build plugins
7:32:39 AM: Finished saving build plugins
7:32:39 AM: Started saving pip cache
7:32:41 AM: Finished saving pip cache
7:32:41 AM: Started saving emacs cask dependencies
7:32:41 AM: Finished saving emacs cask dependencies
7:32:41 AM: Started saving maven dependencies
7:32:41 AM: Finished saving maven dependencies
7:32:41 AM: Started saving boot dependencies
7:32:41 AM: Finished saving boot dependencies
7:32:41 AM: Started saving rust rustup cache
7:32:41 AM: Finished saving rust rustup cache
7:32:41 AM: Started saving go dependencies
7:32:41 AM: Finished saving go dependencies
7:32:41 AM: Build script success
7:32:42 AM: Uploading Cache of size 144.2MB
7:32:43 AM: Finished processing build request in 27.939667248s
7:32:43 AM: Site is live :sparkles:

Any help would be much appreciated :))

2

As there is no navigation on isoc-website.netlify.app it is hard to test. But I wonder if you have the appropriate _redirects file in place as per this documentation and the following support guide

3

Thanks for your response, I will look into this.

4

Ok I tried adding a _redirects file with: “/* /index.html 200” but this did not change anything. Do you have any other suggestions?

5

Can you share the public repository you are deploying from?

6

ok here it is:
https://github.com/ISocDevs/STEMMuslimsWebsite

7

Hi @ISocDevs I cannot see a _redirects.txt file in the root of your repo. Please add it with the necessary config and deploy again :slight_smile:

8

oh see i added it before but it didnt work, however i didnt know the extension was .txt, let me try that

9

ok I added the _redirects.txt file but it hasnt fixed the issue :confused:

10

I believe it is a _redirects file not _redirects.txt (see documentation.) In any event @ISocDevs, I don’t see a file in the public directory of the repository.

1 Like
11

oh I see, sorry I gave you the wrong repository, here you go: https://github.com/ISocDevs/ISocWebsite

12

You need to put the file into the public directory.

1 Like
13

My bad haha was getting mixed up with the existing robots.txt in the repo

2 Likes
14

This solved it! Thanks very much!
By the way, is this always the case with any app you deploy to Netlify? That you need to add this _redirects folder or else it will only display the root directory?
and if so why would it not work just exactly the way a normal React application works locally without this extra file?

1 Like
15

This redirects configuration is only required for react spa’s. Most websites use a multi-page approach so it would be unpopular and unfitting to use this as the default.

As far as I know, navigating to a new route in production will return a 404 error since separate
pages don’t actually exist within ‘create react app’ but are instead “mocked” to the client with an spa. This redirects config tells netlify to remain on the index page when navigating.

Hope this clears things up :slight_smile:

16

Yes that is actually really intuitive, thank you very much!