Handling address bar URLs using React and .htaccess - .htaccess

I am learning ReactJS and while creating a test app, I faced a problem. I am using .htaccess to redirect all invalid URLs to index.html for further processing. But something keeps breaking every time I enter an URL with more than one slash in it.
How to Replicate
.htaccess:
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^.*$ / [L,QSA]
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test App</title>
</head>
<body>
<div id="react-root"></div>
<script src="app.js"></script>
</body>
</html>
app.jsx:
(I am transpiling using Babel in a Gulp build. For test purposes, you can transpile online at http://babeljs.io/repl/)
import React from 'react'
import ReactDOM from 'react-dom'
const TestPage = () => <span>{window.location.href}</span>
ReactDOM.render(
<TestPage />
,document.getElementById('react-root')
)
So, when visiting http://localhost/anything it works fine.
But, if I go to http://localhost/anything/something or http://localhost/anything/something/else then it breaks. The server still returns index.html by the way which gets loaded in the browser fine.
Am I doing something wrong?


Could possibly be a combination of several small issues, but have a look in your network tab to see if there's any problems loading. From your example app.js seems to be loading relatively and is not handled inside the rewrite. Try make all the links to assets absolute, i.e. /app.js

Related

.php Extension Remove not Wokring

I am working on the site is www.pinkdropwellness.com.
At the moment I am working on trying to remove the .php extension from the URLs in my site.
No matter whose code I try, it doesn't work on my site. When I remove .php from my link's href it will always send me to a page not found.
Here is my current .htaccess file:
Options +FollowSymlinks
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^([a-z0-9-_]+)/? /$1.php
RewriteRule ^([a-z0-9-_]+).php$ /$1/ [R]
I have tried all sorts of different recommended codes, and no matter what I try I either get redirected to /public_html/link, or /link which both are error pages. Even when I leave link.php as the href, it shows up as an error page. I feel like I am missing something simple here!
EDIT:
Here is my index.php code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Pink Drop Wellness Homepage">
<meta name="keywords" content="Pink,Drop,Wellness,Fertility,Awareness,Essential,Oils,Blog">
<meta name="author" content="Lucy Bowe">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<img id="logo" src="/images/PinkDrop.png" alt="Pink Drop Wellness">
<img id="tree" src="/images/Tree.png" alt="Tree" usemap="#links">
<map name="links">
<area
shape="poly"
name="blog"
coords="445,105,432,123,418,132,402,132,386,136,385,156,417,168,437,185,475,208,510,197,531,167,527,141,496,106"
href="/blog"
alt="Blog"
/>
<area
shape="poly"
name="fertilityawareness"
coords="138,450,149,443,167,441,186,441,199,447,208,458,228,466,243,477,256,477,270,483,302,480,325,475,349,472,371,457,383,443,391,427,373,398,345,373,310,347,268,334,218,348,194,377,141,436,169"
href="/fertilityawareness"
alt="Fertility Awareness"
/>
<area
shape="poly"
name="essentialoils"
coords="787,490,753,498,719,523,671,553,634,566,593,541,545,487,540,432,570,407,606,403,653,420"
href="/essentialoils"
alt="Essential Oils"
/>
</map>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/scripts/jquery.imagemapster.js"></script>
<script>
var image = $('#tree');
image.mapster({
mapKey: 'name',
listKey: 'name',
clickNavigate: true,
isSelectable: false,
areas: [
{
key: "blog",
fillColor: "5679c7",
},
{
key: "essentialoils",
fillColor: "638a69",
},
{
key: "fertilityawareness",
fillColor: "785fc2",
}
]
});
</script>
</body>
</html>

Try this
It will remove the .php extension .
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.php -f
RewriteRule ^(.*)$ $1.php
use the link like
contact
In the Url, it will display like
domain.com/contact

Try this code
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^/$ index.php [L]
ErrorDocument 404 http://www.akshadainfosystem.com
RewriteRule ^([^\.]+)$ $1.php [NC,L]
http://www.akshadainfosystem.com/profile original url http://www.akshadainfosystem.com/profile.php just do not add .php extension to your link just as I did.

.htaccess configured for pushState support; page errors on multi-parameter URL

I am using the following configuration in my .htaccess file to enable support for HTML5 pushState navigation on a website:
# HTML5 pushstate support
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ / [L]
This works works great when the url of the website is something like:
www.example.com/foo
However, I begin to encounter errors when using a more complex URL such as:
www.example.com/foo/bar
I found this StackOverflow posts which directly addresses my issue. The proposed solution does work, but, to me, it seems like the wrong way to fix the problem. The suggested solution is to provide a <base> tag for the given page, such as:
<!DOCTYPE html>
<html>
<head>
<title></title>
<base href="/" />
</head>
<body>
</body>
</html>
This works because according to documentation the <base> tag corrects relative links.
Okay, fair enough, but that's what the .htaccess file should be doing for me already, right?
Is this something that can/should be configured at a server level rather than on a per-page basis? Or is it standard to use the <base> tag in this way?

It is actually a HTML source problem that is being solved by using:
<base href="/" />
so that every relative URL is resolved from that base URL and not from the current page's URL.
When you have your current URL as:
http://www.example.com/foo/bar
And include your css/js/image with a relative path such as:
<img src="images/header.jpg">
<link rel="stylesheet" type="text/css" href="styles/site.css">
Then browser will resolve above relative URLs from current's URL to make them:
http://www.example.com/foo/images/header.jpg
http://www.example.com/foo/styles/site.css
thus causing 404 for your image and css paths above.
With <base> as defined above browser will correctly request above URLs as:
http://www.example.com/images/header.jpg
http://www.example.com/styles/site.css
Sure some rewrite rules can be rewritten to redirect every image/css/js to root path by identifying these resources using extensions but those will be patches at the best.

<ifModule mod_rewrite.c>
RewriteEngine On
# Required to allow direct-linking of pages so they can be processed by Angular
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) index.html [L]
</ifModule>

angularjs: wrong css path on direct access

One angular app using $location html5 mode, located in an app subdirectory.
when the user makes direct access on a subpage (/thing/123), angular gives a wrong css URL.
for example : the path of the css is site.com/app/css/styles.css, but when the user makes a direct access to site.com/app/thing/123, this page calls a wrong css path: site.com/app/thing/css/styles.css. It is like angular is looking for the css relatively to the current URL. Oddly, the javascript files paths on the same page are correct (site.com/app/js/scripts.js).
However, this problem is only on direct access to a subpage. When accessing from site.com/app/things and navigating to site.com/app/thing/123, the css is loaded correctly.
in index.html, the css link tag is like this :
<link rel="stylesheet" href="css/styles.css"/>
To solve this, I could set an absolute css path: /app/css/styles.css, but I would prefer to keep it relative to the app directory.
The .htaccess:
Options +FollowSymLinks
<ifModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteCond %{REQUEST_URI} !.*\.(js|html|png|css)
RewriteRule (.*) index.html [L]
</ifModule>
How can i solve this wrong css path?

i found prepending the path to the stylesheet with a / solves the problem
<link rel="stylesheet" href="/css/styles.css"/>

This worked for me, together with a htaccess like above:
Set the base url, probably in the base index.html:
<base href="/">
Use paths starting with / to navigate relative base url
<link rel="stylesheet" href="/css/styles.css"/>

using mod_rewrite while keeping relative links intact

I am trying to implement clean urls on a website I'm developing.
I'm using .htaccess like this:
Options +FollowSymLinks
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^(.*)$ index.php?page=$1 [QSA,L]
When the user goes to www.site.com/catalogue, apache is sending them to: www.site.com/index.php?page=catalogue. and that's ok.
But if the user goes to www.site.com/catalogue/item, the site loses the relative links (css, javascript, images).
If the css file is located in css/site.css, apache thinks the html is asking for catalogue/css/site.css.
So: how do I keep the relative links intact while using mod_rewrite?
Also, I would like the solution to be adaptive enough to be able to work inside a folder, ex: www.domain.com/folder/catalogue/item and still refer to www.domain.com/folder/index.php?page=catalogue.
Thank you

There is an easy workaround:
Use absolute path for resource files such as *.css, *.js, *.png, *.gif, *.jpg. ie,
You revise your HTML code from (BAD):
<style rel="stylesheet" type="text/css" href="catalogue/css/site.css" />
=> GOOD:
<style rel="stylesheet" type="text/css" href="/catalogue/css/site.css" />
This requires your re-programming of PHP scripts.

Htaccess for url rewrite with one variable

RewriteRule page/([0-9]+)$ page.php?id=$1
It works, but the included links like css or js don't work. page/ is seen like a folder, so the links (example: <link rel="stylesheet" type="text/css" media="screen" href="css/default.css" />) aren't found.
Another example: if "id" doesn't exist i do this ErrorDocument 403 /notfound.php, but you are redirected to domain.com/page/notfound.php. How i can solve this problem?

Try this instead :
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule page/([0-9]+)$ page.php?id=$1
This will redirect only if the requested file or directory does not realy exists.
More informations on mod_rewrite here
Edit :
As for you issue with resources not beeing found, you will have to add the base tag to you head section in you html page :
<base href="/">
More informations about the base tag here

Resources