score:0
create a file .htaccess file in react js root folder where index.html
and add the below code
rewritebase / rewriterule ^index\.html$ - [l] rewritecond %{request_filename} !-f rewritecond %{request_filename} !-d rewriterule . /index.html [l]
save the .htaccess file and enjoy your working
score:0
this one works nice for me :
# react router
rewriteengine on
rewritebase /
rewriterule ^index\.html$ - [l]
rewritecond %{request_filename} !-f
rewritecond %{request_filename} !-d
rewritecond %{request_filename} !-l
rewriterule . /index.html [l]
score:1
can you share some error log screenshot or copy-paste ? 500 is a server-side error, obviously. maybe your routes on server are not matching the url pattern. or some express server route function threw an exception.
please, provide some logs from client and\or server.
upd: just mentioned the "static site" thing. didn't understand what exactly do you mean by that. for me it's no server at all.
still i'm pretty sure that your server has no routes configured.
server knows what is "/"("index.html"). but there are no routes configured for, say, "/potatoes".
in express server you would do something like:
app.get('*', function(req, res){
res.sendfile(__dirname + '/index.html');
});
- meaning, all get requests to your server(app) will lead the user to same "index.html".
score:3
your server's route should match the routes defined in the react-router, if they don't match then you will receive a 500 error.
score:8
when you’re visiting a route of your app directly, e.g. via https://myapp.com/route/123 apache tries to map that url to a file in the public folder. in this case it looks for /route/123.html which obviously doesn’t exist. to avoid that, we have to tell apache to redirect all requests to our index.html so our app can perform some routing magic for that url. to tell apache to redirect requests to index.html where our app lives, we have to modify the .htaccess file. if there is no such file in your app’s folder yet, just create it.
options -multiviews
rewriteengine on
rewritecond %{request_filename} !-f
rewriterule ^ index.html [qsa,l]
for more information check this out.
Source: stackoverflow.com
Related Query
- React app returning 500 Internal Server Error
- Nginx 500 Interal Server Error with React app - 1 rewrite or internal redirection cycle while internally redirecting to "/index.html"
- Suddenly started encountering Internal Server Error 500 on Mac for React App with Express server
- How to fix 500 internal server error while using Django and React
- Managing Django Rest Framework 500 Internal Server Error in React when creating user
- Internal server error 500 react post to firebase
- 500 internal server error on request to Node server from React client
- When uploading React app to server all routes except "/" return Internal Server Error
- When I deploy my app to vercel i resolve an error 500 Internal Server Error
- express-generator and react app - network error 500 (internal server error)
- React with Django: Internal Server Error 500
- eslint error on deployment on local server of react web app
- eslint error on deployment on local server of react web app
- Next.js server side api call returns 500 internal server error
- internal server error 500 occuring after deploying after using getServerSideProps next :js
- Using external babel configuration breaks node/react app - internal server error
- 500 internal Server Error on Shared hosting
- I get internal server error while running next js app with styled component
- CORS error when posting request in React app to PHP file in Apache server on localhost
- Delete Function in To Do App Returning as an Undefined error in React
- Not able to build react native project getting server returned response error 500 in react native?
- CORs error AFTER deploying React App and separate Node API to production Unbuntu server where React static files are servered with NGINX
- Next.js 500 Internal Server Error right after calling useEffect Hook inside 404 Page
- .htaccess 500 internal server error when routing api
- I am running a react app locally on apache2 server. It gives error URL not found on this server
- How to have a custom internal server error using react next? (500 internal server error)
- Express React Router Internal Server Error When Linked Directly
- How to get a response from express server about an error using axios in react app
- Development server returned response error code: 500 \ React Native
- fetch API keeps returning internal error 500
More Query from same tag
- How can i enable service worker in dev mode in create-react-app?
- setState hook is always 1 step behind when trying to filter
- How to deploy Spring boot and React application together on GCP App Engine?
- Showing loading indicator only on initial load in graphql Query
- React useEffect warning in MERN App: Can't perform a React state update on an unmounted component
- 'TypeError: NetworkError when attempting to fetch resource' on form submit ReactJS
- Avoid routing when page is dirty
- When to use React setState callback
- React: Add/Trigger active class to mapped items
- How to extract React library to separate bundle?
- Check all weekends dynamically from api data using moment.js in react
- Error Message React: Uncaught TypeError: Cannot read property 'length' of undefined ()
- react router not rendering the component
- React router redirect to root blank page
- Property 'data' does not exist on type 'Response'
- React/Redux ComponentWillMount isn't loading data
- How to have Nginx to proxy pass only on "/" location and serve index.html on the rest
- get height of image on load and send to parent
- Updating function level variable in a fetch request
- Updating component data in React
- onChange event is not getting fired on react
- how can i add object in array which is in object as property (react.js )
- Function changes data of input array
- React: Why on .map an array doesn't show list of items?
- Why does popper jump to top-left corner when underlying component re-renders?
- React/NodeJS - Web page doesn't work when go at localhost:3000
- String manipulation in JS and React
- Calling a function for ALL child components
- Cloudinary image upload from React: am including Cloudinary unsigned preset but get "Upload preset must be specified when using unsigned upload"
- React - Render happening before data is returned and not updating component