I'm another person that can't get react routes to work after create-react-app build

I am creating a build of my create-react-app. It does not work with the router. Specifically, components assigned to any route other than the landing page do not load/render after the build. This is the case outside of Netify.
I test my build by doing “npm run build” and then running the build folder on sublime server.
I get the same bad result with running my app on Netify.

My app is here:
https://mystifying-poitras-58b513.netlify.com/

When a user clicks “Full Calendar” they should see the calendar. To see the full calendar you need to first submit a form item.

I tried reading this and I don’t understand it.

Thank you!

Hi, welcome!

This is the part of the documentation you need for your single page app: https://docs.netlify.com/routing/redirects/rewrites-proxies/#history-pushstate-and-single-page-apps

Create a _redirects file at the root of your application (or use the netlify.toml syntax) and add this line:

/*    /index.html   200

Do I place _redirects in the build folder or do I place it at the top level directory of my create-react-app before I create the build? Also is the file just named _redirects or do I put a dot in frot of it? As in ._redirects

No matter what I do it doesn’t work. I think I need step-by-step instructions.
What I’ve done is the following:

first, I run my app on my local machine to make sure it works prior to creating a build.

CHECK

I then remove the node_modules folder and yarn.lock folder (as well as any previous build folder if one exists) and then I create a _redirects file at the top level (it’s in the same directory as package.json). The _redirects file has the following written in it:

/* /index.html 200

I then push my changes to the master branch at github and then in netify I choose that repo to deploy.

My site does not launch. This is the result:
https://jovial-leavitt-f983fc.netlify.com/

In this second attempt, I moved the _redirect file to src and pushed my changes to master. I then chose it as the repo for netify. It still does not work.

https://relaxed-clarke-e7fa89.netlify.com/

Third attempt.

I had accidentally left a 'hompage" property in the package.json file from previously trying to deploy this to github. I removed it.

The homepage of the app now works but the router endpoints do not albeit the initial problem that I am having. If you go to the link below and type some text into the form and hit enter, a tab that says “full calendar” appears. If you click it , the calendar should appear.The page does not appear nor do any other component-assigned routes.

https://goofy-jang-c65c3f.netlify.com/

Fourth try.

I created a new branch and I created the build. I put the _redirects file in the build folder. I pushed my code and created a new netify site that references the branch.

It still doesn’t work.

https://blissful-tesla-f21de8.netlify.com/

Hey @workflowmagic

When using create-react-app, you will want to put the _redirects file inside the /public directory.

During the build process (npm run build), all files inside /public will be moved to your site’s root directory (/build). When working locally, changes made inside of the /build directory will usually be ignored as they will not be committed to the git repo (as per .gitignore).

Note that this directory configuration is specific to create-react-app, other SSGs may have different “public” directory configurations.

It works. Thanks Jinski.

Made my night.

2 Likes

Awesome, glad we can help!

I am having the same issue but I’m using netlify.toml. Should i put the file in the public folder?

Hi @Victor-El,

Unlike the _redirects file, the netlify.toml file should be stored in the root of your site repository, not the public folder.

1 Like

It’s working now, Thanks.

2 Likes