In my react app I'm using react-router with BrowserRouter.
my webpack file has
devServer.historyApiFallback: true
I have a
<Route path='/details/:parameter' />
when navigating through the app, both the fallback and the route(s) work as expected.
However, if I'm on the route that serves at /details/:parameter and I refresh, the app breaks and tells me in the console that it can't find
/details/webpack_bundle.js
however the url in the browser still contains the correct route with its parameter.
I was hoping to find an elegant solution to this. Any explanation for why it's behaving this way is appreciated.
duplicate question: see React nested route fails to load on refresh.
I'm using HTML Webpack Plugin in webpack and this is the solution I found.
webpackConfig.output.publicPath = '/'
this loads the bundle from the root directory.
Open up your console and check if your getting an unexpected token error '<'
It's probably because in index file you're missing a slash '/' before the bundle.js. Change it to <script src='/bundle.js'><script>
Check out this answer: Express.js, Unexpected token <
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 nested structure where i host the react build as follows level1/level2/level3. When i hit the static hosted build using serve with localhost:3000/level1/level2/level3 it redirects correctly to localhost:3000/level1/level2/level3/title/cat/id. But when i try to hit
localhost:3000/level1/level2/level3/title1/cat1/id1 directly it just returns Not found.
I have the browser router code as follows
<BrowserRouter>
<Switch>
<Route path="/level1/level2/level3/:pageTitle/:category/:id" render={AppBody}/>
<Redirect from="/level1/level2/level3/" to="/level1/level2/level3/title/cat/id"/>
</Switch>
</BrowserRouter>
Why does default redirect work but not when we try to hit the url directly?What's the correct way to fix this?
This works just fine for me, so I think there is some other aspect of your code that is causing a problem.
Here's a code sandbox with a simple index.js that includes your router code:
https://codesandbox.io/s/vmyzkj1lvy
You can use this URL to see the results for the particular URL you mentioned:
https://vmyzkj1lvy.codesandbox.io/level1/level2/level3/title1/cat1/id1
The problem could not be actually the react router but instead your server. So first check that your server is actually returning a response when visiting /level1/level2/level3/title1/cat1/id1.
Your react router is actually changing the url in the browser when it hits <Redirect from="/level1/level2/level3/" to="/level1/level2/level3/title/cat/id"/> without sending a request to the server.
You can use this python gist as a server for static serving for your react app that I believe would solve your problem ;)
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';
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.