I have been trying to figure out Netlify redirects. My Netlify app is at this link (however this is a blockchain application and requires that you have metamask, so I will try to explain my problem so that you don't have to install it to actually answer my question): rekt.netlify.app
I have two main problems:
I have already tried the whole _redirects file with /* /index.html 200 in it. This works when I go to rekt.netlify.app/games and refresh, it will actually come back to that page. That's good. The issue is when I then go to rekt.netlify.app/games/Valorant for example, it will be a white page on refresh, and I cannot figure out why. In my react application, I have react router set up so the path is path="/games/:game"
I went to the Networks tab in the google inspect and I found that this was the request URL when I refresh the page on /games/Valorant: https://rekt.netlify.app/games/static/css/2.80dce9aa.chunk.css
As you can see, the issue is probably something to do with that /games/ comes before /static/ in the URL. I'm a beginner so I don't know what that actually means.
The second issue I am having is that, the img tags of the games load on the /games page, however, when you click on a specific game and attempt to go to a /games/Valorant for example the image will not load. I believe this is due to a similar problem. I have gone into Network tab of google inspect and when I look at the image being loaded in the /games page, it attempts to GET https://rekt.netlify.app/static/media/league_wallpaper.f5e6bf5f.jpg which works. However, when being loaded in the /games/Valorant page, it attempts to GET https://rekt.netlify.app/games/static/media/league_wallpaper.f5e6bf5f.jpg and this does not work, it's a blank page.
You can notice that the second link there has /games/ in it which I believe is preventing it from getting the image. Potentially the problem here is that anything more than one / in the URL is messing things up? I'm not sure. This is the link to my github project: https://github.com/jacob-tucker/ReKt
Edit: Here are some screenshots that will hopefully help. This first one shows that the request URL is trying to get the image from /games/static (which I don't think makes sense). This is happening on the /games/Valorant page.
And then here is a screenshot of /games/Valorant trying to load as well after I refresh the page and get a blank white screen (it returns a status code of 200 because I have /* /index.html 200 in my _redirects file.
I had a the same issue a while ago, I've just added
"homepage": "https://my-app.netlify.app",
in package.json and it worked perfectly.
Related
In a Next.js project, I am coming across a situation where I get a new URL path from an API. And I have to update that URL path in the browser without reloading that page.
I am doing that with the help of History.pushState()
window.history.pushState(nextState,nextTitle,nextURL);
window.history.replaceState(nextState,nextTitle,nextURL);
With help of History.pushState() I am able to update the URL in the browser without reloading that page. But If after I change that URL multiple times and change to some other page. Then if I start pressing the browser back button, I am not able to get that page with the last URL path showing in the browser.
Only that last URL path shows up in the browser URL input, but that page data is not reflected.
Attaching the sample code and reproducing steps video link below. Any help and suggestions are appreciated.
Source Code
Codesandbox
Reproducing Steps
I am also facing same problem, after using history.pushState() browser back button will not work in that page, because according to browser you never went to that page.
That location doesn't exists in JavaScript history object.
I am editing this Gatsby starter to make a personal website: https://www.gatsbyjs.org/starters/rolwin100/rolwinreevan_gatsby_blog/
Note that the problem I'm having with my site also happens when I develop the starter (with no changes made).
My desired outcome is pretty simple, I just want to be able to click on a blog post at site-name.com/blog/post-name that works. So, I set the path in my markdown files to be blog/post-name, replicating the starter exactly. However, when I run gatsby develop and click on the posts, the weirdest thing happens, For ex, from running the starter I get: There's not a page yet at /blog/blog/code-splitting-in-react (pictured fully below). But the page /blog/code-splitting-in-react does exist and when you adjust the url to that it brings up the page perfectly.
So the question is-- where is that extra 'blog' coming from in the path and how do I get rid of it??
error messages when I click on a blog post
You said that you are setting the url to blog/post-name. That is a relative path. It is going to start from whatever url you currently are. For example if you are in http://example.com/bla/foo you'll end in http://example.com/bla/foo/blog/post-name. You need to add a slash at the beginning: /blog/post-name.
I'm working on a react application, that works perfectly until it's built for deployment.
My repo is here:
https://github.com/aiglinski/qr_app.git
I've tried for the better part of two days. I would post code, but at this point I'm so lost I wouldn't even know where to start.
The app does load. If you open the console all of the elements show, and I can manually enter different paths and those load, but nothing shows beyond a blank screen.
Thanks.
I'm back (Refreshing React with Express server). I am hoping to figure out this issue.
Quick recap: I am trying to refresh my react website. If I go to www.domain.com/about I will get the:
Not Found
The requested URL was not found on this server.
same if I click on the button to get to /about and hit refresh I will get this error.
My goal
To be able to go to my site, click on another page (i.e. domain.com/anotherpage) hit f5 for refresh and get the same page.
I understand:
The problem is that React just changes the URL when I click on my React app button or link to go to a different page. Then when I refresh it looks for www.domain.com/whatever. Since there is nothing for it, it returns 404.
I also know that if I can get my React app to direct all traffic to index.html. React will handle the rest.
What I have tried:
In my previous post, it was suggested to use my hosting site to redirect traffic to index.html. However, my hosting site lets me adjust the DNS for subdomains but nothing after it. (ie. www.subdomain.domain.com works fine but www.domain.com/whatever doesn't) which I expected but I thought I would try.
I do have an express app however, it doesn't serve the files it just waits for a button to be pressed and then does stuff. I don't need to the server to run to have the website up.
I have tried creating a route in express for this and it looks like:
app.get('/*', (req, res) =>{
res.sendFile(path.join(__dirname + '/public/index.html'));
});
I still get the same 404 error with this.
I have also added an index.html to my server. Thinking it needed the .html file to send. (Thought it might be good).
What I don't know
Where does React look for index.html in production? When I look in the build files under asset-manifest.json there is an "index.html": "/index.html" line of code. Is there where it finds the index file? If so, can I change this to go to index.html on every page request?
Obviously I want the user to be able to refresh the page and get back to it. Can someone point me in the right direction?
Thanks in advance!
I recently moved my WordPress site from one host to another. I cancelled the previous host already because everything displayed just fine on the front end.
However, when I go to Admin Panel, I get a lot of empty pages. The comments, Posts and other pages display a correct count of items at the top, but the actual content is not displayed.
I have disabled all plugins, changed the theme, tried Wordpress Repair, none worked.
Also, some times when I refresh the page, the first item on the list appears, I refresh again, the page goes blank, I refresh again, the page appears but no comments.
The way it works, it almost seems like the script gets terminated while retrieving data.
Picture of Comments page
Picture of Comments page
I'd appreciate your help!
Seems like pages are not getting rendered due to some error. Kindly change the define( 'WP_DEBUG', true ); in wp-config.php to find them & troubleshoot. Once issues are fixed pages will render properly.