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
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 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]
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 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.