I have a pretty extensive ngRoute router right now with around 15 different URL paths. The website I am working on displays pages with heavy data, lots of charts, etc. for a logged in user. My issue is that when I refresh the page, it will redirect me to my default page. I have tried adding these:
app.config
if(window.history && window.history.pushState){
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}
< head> tag
<base href="/"/>
.htaccess
<ifModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) index.html [L]
</ifModule>
This didn't work for me. It seems that switching to ui-router fixed this same issue for this guy in this link: AngularJS Route breaks on manual refresh
My questions:
Will ui-router really handle the manual refresh properly?
Is it worth it to migrate from ngRoute to ui-router or is it better to find the solution to manually refresh properly with ngRoute?
I made the move, the migration was smooth, and it fixed my refresh issue! Feeling good about the switch.
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 a "normal" WP site, with pages, posts etc... On one of my pages Im using a custom template with React APP inside, which has its own routing. For example domain.com/react-page. When I change route in my React app - domain.com/react-page/react-route WP tries to find that page and of course it resolves to 404, because it is a react route and not WP.
How to capture all routes only on this page for React routes?
Here's my standard .htaccess
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
Do I need to create some condition for my React page domain.com/react-page/?
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 am creating an application in react using react-router. Earlier I was doing the same with angular but in both cases, if a user bookmarks a URL and loads it directly. It will show 404 error. can we create such rule in htaccess so that the URL doesn't change but the request is passed to index.html.
So after much googling and looking through many answers, I found below configuration for htaccess.
it is working as expected and redirects each requests to index.html and from there react router handles everything.
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.html [L,QSA]
I have a PHP page over at mysite.com/somedir/script.php.
When I have <a> tags in my Angular views that point to this script, Angular's routing always brings me back to mysite.com/index.html when I click on them.
This is my $routeProvider configuration:
siteModule.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl:'/views/blog.html',
controller:'blogController'
})
.when('/blog',{
templateUrl:'/views/blog.html',
controller:'blogController'
})
.when('/work',{
templateUrl:'/views/work.html',
controller:'workController'
});
// For Pretty URLs
$locationProvider.html5Mode(true);
});
I'm also using some Apache mod_rewrite to handle 404s / page refreshes in an .htacess file that I think may be interfering:
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) index.html [L]
The aforementioned PHP page is a valid (existing) resource so I'm not sure why Angular or Apache would redirect / rewrite away from it. I'm using the target="_blank" on the <a> tags and have the <base href="/"> set in the index page's <head> tag as well.
I just want to be able to access my script normally instead of being pointed back to the index page.
In javascript you can still use window.location.href to escape the router, so in the 'otherwise' section of your router, use window.location.href = {the route} instead of allowing it to use the default index.
See these other answers to this question:
Angular routes - redirecting to an external site?
Using $routeProvider to redirect to routes outside of Angular