I found a similar question here but I did't find an explenation exactly how to fix the problem. All pages on my website except index.html doesn't load when you are reloading the page. From the previousquestion I think that to solve the problem without server I need to use HashHistory but I cant' found explination how to use it. What to do in my app and what to put in my navigation. http://turbo-remont.com/
I made this website for a friend but I can't deal with this problem. Please help me.
The problem is that your server attempts to fetch the resource and not load the main file (index.htm) and then activate navigation.
and example:
Your site base is http://turbo-remont.com, if you navigate to it, your app loads and from that point on overtakes the navigation so if you go to http://turbo-remont.com/resource/1234 , it won't send a new fetch request but internally update the state and load the relevant component (as SPAs do).
When you reload the page, which is actually equivalent to navigating to the page, your server attempts to find and html file named '/resource/1234'. To overcome this, you need to instruct your server to serve index.html regardless of the full url.
I don't know what server you use, but here is a simple example of an .htaccess file that solves the problem, place it in your root directory.
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
Related
I have a decentralized app with a React frontend. If I go to the homepage (https://app.valerianprotocol.com/), everything works fine and I can refresh the page without any problem. On the other hand, if I navigate to another page (for example https://app.valerianprotocol.com/pool), I will get a 404 page if I refresh. I have been debugging for 3 hours but I couldn't find anything.
Can someone help me with what can be the problem?
Maybe the page doesn't save the sessionid if it is not the home page?
The problem is that when using react with a router library (e.g React-router) you are not fetching the page "/pool" you simply change the content of the main html element inside index.html, and it works fine if you use links and navigation inside the React application. But when loading a page which is not the root, the server will try to serve the folder /pool which doesn't exist so it returns a 404 error. The options to solve this is to switch to a HashRouter for example or change the server configuration to redirect all into ìndex.html. Example of .htaccess rule:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>
I have an application based on codeigniter3 framework hosted on VM bitnami lampstack. Initially I have set up the apache to serve the application from the root domain: example.com/. Furthermore I have an .htaccess file for removing the index.php from url as per CI3 documentation.
The content of my .htaccess is as follows:
RewriteEngine on
RewriteCond $1 !^(index\.php|assets|static|vendor|images|js|css|uploads|favicon.png)
RewriteCond %(REQUEST_FILENAME) !-f
RewriteCond %(REQUEST_FILENAME) !-d
RewriteRule ^(.*)$ index.php/$1 [L]
Recently I have changed the apache configuration as such that the application to be served from example.com/codeigniter and although the main page is loading correctly all the links in application are broken and when clicked they return not found message: The requested URL /about was not found on this server.
My routes in config/routes.php looks like this:
##---------------- Home Routes ------------------##
$route['about'] = 'home/about';
$route['login'] = 'home/login';
The link in the navbar is set like this:
<li class="navbar-item" role="presentation">
<a class="navbar-link" href="/about">
<i class="far fa-address-card"></i> About
</a>
</li>
When the link is clicked it is pointing to example.com/about instead of example.com/codeigniter/about. But even if I add as href="/codeigniter/about"it is still does not work. Seems to me that the somehow the codeigniter fails to map the path to the correct controller.
The problem is solved in part by adding index.php before the route (e.g. example.com/codeigniter/index.php/about). It is loading the correct page but fails to load the static files (css, js and images files).
So seems to me that problem results from .htaccess file but I do not know how to fix it. What should I add to or remove from that file?
Do you have any ideea how this problem may be solved?
Thanks!
I have a multi-page app that I am trying to host on GoDaddy. After running npm build, I upload the files to GoDaddy as per their instructions and I am able to view my homepage without any trouble. When I try to navigate to another page such as the about page, I get a 404 error.
I have been searching and the solutions I attempted did not work. I tried adding "homepage": "http://www.kashy.com.au/", to my package.json. I also tried playing with the routes. (Adding the URL for the site in the path).
I am new to React and so I don't quite understand how the routes work. Could someone point me in the right direction for solving this problem?
You need to redirect all urls to ur site on Godaddy to point to the homepage/index as the routing is handled by your client/react app.
Create an .htaccess file to redirect all requests to index.html.
Sample
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
Steps
From your cpanel file manager, go to the root folder of your website (ie. public_html).
Create the (dot)htaccess file, by clicking on the top left menu
Right click on the file and edit and then paste the above
Save
I'm using react router 4 on a server which uses Apache and have a simple set up for a particular route:
<Route path="/:id/list" component={List} />
The page get's the id (this.props.match.params.id), then does an api call for some of the page content.
When navigating around the app it's fine and works perfectly. However, if the current url is e.g.
https://example.com/123/list
and I refresh the page, it fails to load. No errors, no content.
I'm using the following in my .htaccess files which works perfectly for refreshing non-dynamic pages, but not dynamic
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
How could I do things differently so it loads dynamic content too on page refresh?
Page refresh on localhost when developing works as it should.
As suggested by the first answer, I did try:
RewriteRule ^(.*)$ /index.html [NC,L,QSA]
But no difference.
For anyone else having the same issue, I switched to using HashRouter instead of BrowserRouter and it works as planned. Not ideal as I don't personally like hash symbols in a URL but for now, it's a solution.
<HashRouter>
<App />
</HashRouter>
Likely the issue is that your apache server doesn't know to serve your app when it gets a request for /123/list. You basically need to set up a wildcard rule to redirect all unknown requests to be handled by your index page (which will do client-side routing).
Here is a relevant question I found: Redirect all to index.php htaccess
I have one page which the routing goes from. So if the user go from that root page e.g. http://localhost/rootPage and click on a button to go to http://localhost/rootPage/subPage that's fine however if the user refresh http://localhost/rootPage/subPage it will go the directory listing instead of the subPage.
So I wonder how can I make so the user still ends up in the subPage even though user refresh the page? Is it something in AngularJs or is it something I need to configure on the server?
I found many SO answer on my issue. All of them are related to edit .htaccess file. None of them I found solved my issue though, so I googled and found this Youtube video which also involves in editing .htaccess
Here's the snippet of what fixed my problem
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ %{ENV:BASE}index.html [QSA,L]