I have a question.
I created a react website and everything works perfectly on local development.
So if I go to localhost:8080/about I get on the about page.
When I build the website only an index.html gets made.
When I navigate the website from the index page, it all works, also the urls changes to /about when I go to the about page through the menu.
But when I go to www.website.com/about by typing in the address I get an error page.
Who can help me with this?
JayD
You need to setup your react router accordingly. Usually you need to add one extra file in your build files. Below is the tutorial on how to setup react router using fierbase and netlify. If you deploy somewhere else, please let me know. I can help you with that.
Firebase
Netlify
Related
I have made an website using ReactJS. Everything goes well on development server (npm start)
I build the final version ready to be uploaded on host run build
I try to access one of the pages on build folder, but it renders me nothing.
The only page it renders is the 404 page when I try to enter the home page. Which is wrong.
I have tried to use HashRouter. But the URLs are ugly.
I am using React Router v6.
This is the git https://github.com/AlexBrasoveanu/adstoriav2
Help!
Thank you!
Is this your home screen?
I ran your code on codesand box it produced this.
I am working on a gatsby hybrid app that has several client-only routes with dynamic server data.
Strangely when navigating to one of the client-only routes at I am getting the 404 page and the message that there is no page found.
Visiting the client-only URL directly, eg. mysite/auth/login works, and the issue only happens when using an internal Link component or navigate('/auth/login').
I am using the gatsby-plugin-create-client-paths setup
and Router component to handle the client-routing
I am have tried different approaches but couldn't figure out why I am being redirected to the 404 page.
The issue happens only on the inial page visit. Once the page has been loaded internal navigation works without errors and also only happens in development mode. The production build works just fine.
Any ideas what could cause this behavior??
I guess you are using reach router navigate.
If thats the case, try and use navigate from gatsby.
import { navigate } from 'gatsby'
Similar issue exists in the "simple-auth" example in Gatsby git repository. After initial startup by running yarn develop at background, the click on 'log in' will go to Gatsby development 404 page.
The reason behind this is this example, and quite a lot demo around blog spots use the "Link" from #reach/react, which normally doesn't handle SSG or static routing thing, but "Link" from gatsby knows very well how to handle these.
So, the fix is:
to replace // import { Link } from "#reach/router" with import { Link } from "gatsby".
I'm new in react app development, I just build my practice app and deployed it through Netlify. I can visit my app and everything is fine till I refresh my window. Refreshing the window comes with an error page not found. what should I do to solve this problem?
You may need to look at providing a _redirects file in your root directory. See https://docs.netlify.com/routing/redirects/
For example,
/* /index.html 200
As cra is single page application, you need server setting to redirect everytime to index.html,
You might want to check this link
https://www.netlify.com/blog/2020/04/07/creating-better-more-predictable-redirect-rules-for-spas/
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 have a React application created by create-react-app. The app works fine, but I have run into a problem
I need to test som ad things on a plain html site, no additional React code. The problem I have is that the ads.txt tags need to be crawled by Google, which can take up to 24 hours on a new page/URL, time that I don't really have.
So I did the following. In my repo under /public folder I added a folder /ad-test with an index.html inside. When I serve it locally using npm start and go to http://localhost:3000/ad-test, it works fine.
Great, I thought and deployed it to the production environment, but now when I try to go to http://[my-site]/ad-test or http://[my-site]/yo-test/index.html it does not work (I get the React 404 site that I created).
I looked here and if I understand correctly, it is not possible to do it the way that I tried since the build stage will not include the public folder. Am I correct in this?
Any idea how to solve this?
EDIT:
I have a good knowledge of React and React Router in general, the app already uses <Switch><Route ... /></Switch> with a catch-all route directing to Not Found Component and the bottom.
The problem I have is that we include some ad scripts from an ad provider. The ads are not displayed in the application (adblockers totally removed from browser etc.) and the provider thinks that we have made errors in the React code.
We don't think that we made any errors (the ads were displayed fine in our test environment but not in prod) and we have to prove that React is not to blame for the ads not showing.
To do this we created a static HTML file with all ads hardcoded, no React components or other things that might disturb. BUT, because of ads and Google crawlers and ads.txt, we need to have the static test page under the same domain as our main page/application.
This is why I ask if it is possible to somehow add a static HTML that can be reached from http://my.page/test-page.html without being "intercepted" by react router, i.e. it exists outside React but on the same server.
When you use react by create-react-app, it means you are building a single-page application.
What this means is that after running npm run build you will have a build folder with only one html file called index.html in that fold.
This index.html does not know and has no relationship with your added 'index.html' in ad-test folder.
If you want your ad-test html to be recognised by react, you need to make it a component of app.js and use react-router to give it a pathname.
It is very simple.
First, install react-router-dom;
Second, set up react-router-dom;refer to https://reacttraining.com/react-router/web/guides/quick-start
Third, give your add-test component a pathname.Your js code should look something like this:
<Route path='/ad-test' component={AdTest} />
IMPORTANT:
After you deploy your app, always remember you just built a single-page application.
You only have one html in your app.
Please make sure when you test your app after you deployed you must tell your service provider that no matter what pathname a user inputs in the address bar you always redirect it to the index.html
The build stage includes the public folder:
If you have a picture in the public folder, and this picture was imported to other components it will be shown after you run npm run build
Hope it helps.
Have you tried playing with webserver configurations? It is usually setup to redirect all traffic to index.html. Maybe exclude your static html path from redirection?
Place test-page.html in public folder like
public/path-to-static-html/test-page.html
Configure webserver for
directing all traffic to index.html EXCEPT /path-to-static-html which
will be directed to test-page.html.
For example, in case of Apache
you will be setting the DirectoryIndex directive.