CODEWITHSUNDEEP
.htaccessreactjsmod-rewrite
Sean Mishra
Sean Mishra

Reputation: 309

Handling address bar URLs using React and .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?

Upvotes: 0

Views: 536

Answers (1)

Theo.T
Theo.T

Reputation: 9267

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

Upvotes: 1

Related Questions