Using URL Rewrite works fine and navigates to index.html. But how to navigate to the exact component. Redirecting to index.html will show my home page. what if i have multiple components and i want to match the exact component as well?
Is it possible to host a react app in IIS and to do URL rewrite?
Is your app in the root directory your the IIS Site? I have http://myserver:5999/abc/123 working (where abc and 123 are my route params).
Related
The Problem:
We have our website https://website.com and we are trying to deploy a react router application to https://website.com/react-app. Routing works fine if the user first navigates to https://website.com/react-app and then navigates around the app from there. However, if someone navigates to https://website.com/react-app/home directly (or via bookmark) they get a 404 even though /home is one of our routes.
What We tried:
In our package.json we have the "homepage": "/react-app/" set. Using BrowserRouter we set the basename prop to /react-app and the app works when deployed except for 404 when navigating directly to a nested route. We have heard that HashRouter can be useful in this situation, however, when we use HashRouter we are getting https://website.com/react-app#/ instead of https://website.com/react-app/#/.
How can we configure this to allow users to navigate directly to nested routes in our React Router application deployed to a the /react-app Subfolder on our server?
React: 17.0.2, React-Router-Dom: 5.2.0
I think the problem must be not connected with React. Your React app is configured right. Check the configuration of your web server. Your webserver must return index.html with React application when the user navigates to any page.
I have a url with paramenters in my react routes.
I can access the route via {Link} from react router dom as shown below. The page loads upon button click.
However when I refresh the page or try to access the URL via the address bar, I get a blank page and this error message
It works fine locally but the blank page comes up in production. I am hosting the website on heroku.
The best way to handle it is to add a base tag in your index.html.
<base href="/" />
I fixed the problem using the solution in the link below. I initially set my homepage to "." in my package.json and eventually changed it to my app domain
https://stackoverflow.com/a/66950806/6542175
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
The problem: When i go to any internal root, and press f5, it broke, givin 404. Like for example:
https://josuevalrob.github.io/jeval-web/sign-in. But if I go to the root it works fine: https://josuevalrob.github.io/jeval-web
I don't know how to solve this problem. There is a bunch of documentation about this, and I cant handle it.
This is the github repo: https://github.com/josuevalrob/jeval-web
This is the github Page: https://josuevalrob.github.io/jeval-web
And you can see, the package json have the home key:
"homepage": "https://josuevalrob.github.io/jeval-web",
Also the .env is currently empty, but i can add this:
PUBLIC_URL = "https://josuevalrob.github.io/jeval-web"
Nevertheless, it doesn't work.
I had added the homepage or the public_url, neither work.
Github pages doesn't really support single page applications. Single page applications require a server that serves the same page at every url and then the client renders the appropriate content based on the url. Hence the "single page". Github does not allow you to run server side code, so you can't write a server to serve your index.html at every route.
There is, however, a hack you can use to make this work. When you navigate to a route other than the root url, Github will serve a 404 page as you can see. Github allows you to customize this 404 page. So, you can make the custom 404 page your single page application and then it will be served at every route as required.
This repo explains the required steps to serve your single page as a custom 404 page on Github pages.
Basically it amounts to...
Copy this 404.html page to your repo as is
Add this redirect script to your index.html page
The only drawback is that the url is forced to redirect and quickly flashes the incorrect URL before redirecting. You can see an example of this by refreshing this page. If you want to avoid this, you need to look for hosting somewhere else that allows you to edit server side code and serve your index.html at every route
I had a similar issue with react app. I fixed it by using HashRouter instead of BrowserRouter in App component
I tried to deploy my react app which was created using create react app to,
1.nginx
2.github pages
In both instances, only the react app logo and the title is visible in the tab but nothing appears in the body of the page. (The page is blank even though the code is deployed)
Does anyone know why this happens?
This is caused if you have used the Browser Router in your react project.
Both GitHub Pages and nginx serve your app from a non-root folder (i.e. username.github.io/repo-name/) as opposed to from a root folder (i.e. username.github.io/). React Router does not consider your app's URL as a match for any of the routes defined in your app.
For example, if you define a route using <Route exact path="/" component={SomeComponent} />, React Router will see that / and /repo-name/ do not match exactly and will, thus, not render the component.
To overcome this error use base name prop in the BrowserRouter and name it according to the non-root folder name.
example:- if your app is served inside a folder named "folder1" in your server, do as follows.
Hope my answer helps someone struggling with the same issue.cheers! #iii #R2B