score:5
it turns out that i was using a windows iis server. i'm new to the world of web servers and didn't know that i was working with an iis server.
it turns out that i needed a web.config
file to make my url redirects work, and not a .htaccess
file, like i was trying to use initially.
this is the content (found from this stackoverflow answer) of my web.config
file:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webserver>
<httperrors errormode="custom" existingresponse="replace">
<remove statuscode="404" substatuscode="-1" />
<error statuscode="404" path="/" responsemode="executeurl" />
</httperrors>
</system.webserver>
</configuration>
score:0
try specifying your homepage in your package.json file
{
"homepage": "https://yoursite.com",
}
then run
npm build
or
yarn build
score:14
if you are using and apache server the problem might be your .htaccess file, when you are using react router the routes that are created or declared in react do not exist in the server, therefore we have to configure the requests so that each one goes to index.html and show a 404 in react when the page is not found.
according to the create-react-app documentation:
if you are using apache http server, you need to create a .htaccess file in the public folder that looks like this:
options -multiviews
rewriteengine on
rewritecond %{request_filename} !-f
rewriterule ^ index.html [qsa,l]
link to create-react-app documentation:
https://create-react-app.dev/docs/deployment
you can read more about the creation of a 404 page in react in the react router: documentation:
Source: stackoverflow.com
Related Query
- react-router throwing 404 upon page refresh with React app hosted on GoDaddy
- 404 Error on refresh with SPA React Router app in GitHub Pages
- react router app hosted on firebase issues 404 error only when trying to access route via address bar
- Getting 404 with react router app with nginx
- Serving a static html page from a single page react app with react router
- My 404 not found page with React router is not working
- 404 custom page not working with useContext and React Router
- Deployed React App to IONOS - 404 on page refresh
- React Router refresh 404 with Nginx
- React app website page only loads upon refresh
- Netlify blank page when refresh url with more than one path param using react router
- React Router throwing 404 on Azure Linux Web App
- React Router URL not found if refresh page - Create React App
- Create react app breaks after deployment on refresh 404 with Nginx
- React Router with redirection to login page but also to have 404 NotFound route
- React router 404 error when refreshing page with url params
- Create react app served with nginx and oauth gives me refresh page issue
- React Router - Mapping routes with 404 error page
- Render same selected number even in page refresh react js with react router
- React Router 4: Route a page to 404 page if it doesn't match with my routing URLs
- React JS Switch Router with admin only pages not hitting my 404 page
- React router with lazy and Suspense always falls back on wildcard route on page refresh
- React Router dom is not working when I hosted my React App with github pages?
- React Router v5: 404 when use url directly or refresh page on route different from "/"
- React Router Page hosted on GitHub Breaks On Refresh
- How can I use Multiple layouts with 404 page in React router
- Getting 404 when Auth0 callback is invoked with React router and .Net Core server app
- POST request error throwing 404 with node.js server and react app
- Netlify renders 404 on page refresh (using React and react-router)
- How to let react router respond with 404 status code?
More Query from same tag
- Reactjs functional component default props with props object
- Best way to create new div based on a specified length of elements?
- React Js :Syntax Error: Expected corresponding JSX closing tag
- Undo the effect of takeUntil on trigger of another action in rxjs
- Why can't I setState the data I've successfully in React?
- Retrieving sub-domain in Next.js page
- Bootstrap: button styles not showing properly in React/Rails/Webpacker setup
- React-Redux connecting two separate component with a toggle
- How do I render an `HTMLCanvasElement` in React?
- currentUser is undefined is displayed undefined
- when php back-end get param values show Array ( [id] => [object Object] ), how to get the real value?
- how to center css grid and keep it when expending
- How to filter array of nested objects with unknown depth based on given search term
- How to parse link texts to html in React
- ReactJS <input type="date" > format date
- Nesting elements dynamically in React
- where to call the Axios post request in reactjs
- Can't override a style of a deeply nested component (Material-UI Jss Styling)
- Assigning value to global variable in ReactJs ES5
- How can style the backdrop of a MaterialUI modal?
- TypeScript error: Type 'string' is not assignable to type for Typography
- Property 'checked' does not exist on type 'Switch'
- ReactJS rendering sub views with url change
- create-react-app hangs when initializing an app
- How to test a component function being called when componentDidMount?
- react-router 4 and redirecting programmatically
- update state child from parent's onClick on reactjs
- React Material table editing using hooks
- React/Redux nested state issue
- Axios custom instance not working properly with next JS