I have an angular app that uses routes, where it has .otherwise(){} in routes.js file and now I need to make custom error pages using nginx, how to stop the .otherwise(){} and use the error pages defined on nginx default file, Anyone Please help I'm working on it from 5hrs. Or point me to any link that explains and solves this problem.
"Otherwise" in the routing is looking for a client side route. You can probably direct otherwise to a separate route on the client side with a controller that automatically redirects to a server route.
.otherwise('/ControllerThatSendsToServer');
Then in the ControllerThatSendsToServer just do a window.location = 'server error page';
Related
I'm having issues with react url param routes and it's giving out error on amplify.
Example routes with url params
<AsyncSearchResultsList path="search/:q" />
<AsyncSearchDetailedInfo path="search/user/:id" />
This is the error I'm getting
On amplify I have these redirects setup
I can't navigate to either of these routes and it works fine for other routes without parameters
All of these routes are also working perfectly on localhost
Is there something I'm missing? I'm using Reach Router in my react project.
Update:
Figured what seemed to be part of it, the issue I was having was resolved. Amplify wasn't handling the Lazy loaded route components properly, data is flowing and the page is loading now after refactoring. But another issue came up, the page now displays blank whenever I navigate to those routes directly. I'm pretty sure it's an issue with Amplify's redirect rules. Still need help!
To those who need to use react and params
Source address
Target address
Type
Country code
</^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/>
/index.html
200 (Rewrite)
-
/search?customer=<customerid>
/search?customer=<customerid>
301 (Redirect - Permanent)
-
Ref: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa
and
https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#query-parameters
I can go to my root route, navigate using links within the app, but when I go directly to or refresh a non-root route (in production only) I get the following error:
Failed to load resource: the server responded with a status of 404 (Not Found)
I have a project set up with ReactRouter v5.0.1.
I am using BrowserRouter wrapper, I don't want to use HashRouter because of URLs looking nice.
When I refresh or go to a path that is not a root route (eg: ____/user/article):
in local, it works as expected
in production (Heroku), it gives a Cannot get /user/article
I have looked up the issue and the solutions I found were to change my webpack.js:
add historyApiFallback: true to devServer
add publicPath:'/' to output
These have been unable to solve my issue.
My frontend client is inside my nodejs "app" where the built files are served up by an express server. Maybe this may affect my refresh?
Help would be greatly appreciated...
This is a client vs server side routing issue. When navigating around on front end, it's all client side routing. But when you refresh the page, it does a request to the back end with that route. So in your express server, you need a catch all route, defined after all other routes, that redirects them to the root path /, e.g.
app.get('*', function(req, res) { /* redirect to / here */ });
There's a bunch of posts about this already if you want some more in depth exploration of the issue, like this one
I have a problem with my front-end in Reactjs(my back-end is in Laravel).
When I reload a pages, I have this error "Sorry, the page you are looking for could not be found."
I don't know why and how resolve this.
It's in my Router ?
Thanks for your help
You should have a configuration file respective to laravel for redirecting all the routes to index.html file.
The issue is that since you have react router which is an application's internal route, server thinks it as an external application path. So you should have a router forwarding configuration to serve index.html irrespective of the route.
In IIS it is done using web.config file.
When I refresh the page on some url like "page/sub/url/" I get an error because this is send to the server and not to the bundle in index.html. From here I understand that it is possible to configure the server to just ignore such request and serve index.html. No problem here. However, in such case after refresh the user gets the default Indexroute, for example: "/" instead "page/sub/url/" where he requested the refresh initialy. Is there a way to send the "page/sub/url/" to the bundle.js and route the user to this location after he refreshed the page?
OMG .. that was just super easy. Once i defined the routes on the server side and directed them to index.html the pages reloaded normaly without any errors. Begginers mistake.
How to configure the route in AngularJS when the url contains query parameters. I have to write a config for handling route with the url /states?statename=kar. I wrote the config as /states?statename=:name but its not working. Can you please help me where I am going wrong?
If it was /states/statename/kar then I would have written the route with /states/statename:name.