Refresh page on apache with React doesn't work

Question

I'm trying to use React to create a SPA, but I'm running into problem when trying to reload the page.

Before I continue, I must say I already read these questions this and this. I manageg to made it work, but only for the first url.

For example, I have a blog page containing all the posts, accessed via this url mysite.com/blog. This one works fine, if I refresh the page, everything reloads again.

However, when I try to access a single post using a dynamic url, then the page doesn't work. For example, I have this router setup:

// Definiton
<Route path="/post/:url" component={Post} />

// Link
<NavLink to={"post/" + post.url}>...</NavLink>

// Url on the browser
mysite.com/post/this-is-my-first-post

In this case, it's not working. This is my .htaccess file:

<IfModule mod_rewrite.c>
    RewriteEngine On

    RewriteBase /
    RewriteRule ^index.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

After looking more at the problem, I noticed it's trying to load the main files from a different location. For example, when I'm on the page mysite.com/blog it's loading the .css and .js files from mysite.com.

But when I'm the page mysite.com/post/this-is-my-first-post and I refresh the page, it's trying to load the .css and .js files from the directory mysite.com/blog.

I did what Stuffix told in the answe, to check the url definition and also the config at my apache, but everything is enabled and working, just like the answer says.

Are you using Webpack ? – Zachary Dahan Apr 28 '17 at 14:40 — Zachary Dahan, Apr 28 '17 at 14:40

score 1 · Accepted Answer · answered Apr 28 '17 at 12:16

1

Well, after looking at some other projects I have using Angular, I noticed one thing, and it was easier than I tought.

Just had to add the tag base on the head of my index.html.

<base href="/" />

answered Apr 28 '17 at 12:16

celsomtrindade

4,501
18
61
116

I was using `.htaccess` to rewrite all subirectory paths (via `ResourceFallback`) back to my "root" folder's `index.html` and was running into this issue. Silly enough your solution worked for me too over all of my `.htaccess` attempts. – Jacksonkr Mar 09 '20 at 15:53

score 1 · Answer 2 · answered Feb 01 '22 at 11:53

This htaccess worked for me with react and angular

<IfModule mod_rewrite.c>
RewriteEngine on

# -- REDIRECTION to https (optional):
# If you need this, uncomment the next two commands
# RewriteCond %{HTTPS} !on
# RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}
# --

RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d

RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) index.html [NC,L]
</IfModule>

score 0 · Answer 3 · edited May 23 '17 at 11:33

0

In your <Route />, you're declaring the post route is /post/this-is-my-first-post which is correct.

But in your <NavLink />, you're pointing towards /blog/post/this-is-my-first-post since you've missed a slash.

<NavLink to={"post/" + post.url}>...</NavLink>
              | here

Thus leading to a 404.

If this doesn't help, your snippet looks fine so the problem might be on what does post.url returns.

Also, your .htaccess looks fine so I would say you might have missed something in your Apache config like AllowOverride all. See this answer.

edited May 23 '17 at 11:33

Community

1
1

answered Apr 28 '17 at 03:03

Zachary Dahan

1,419
16
26

I updated my question. I tried to do what you said, but it didn't solved. Also, the main problem is not navigating to the post url, I can do it just fine. The problem is when I type the url on the address bar or try to refresh when i'm on that page. – celsomtrindade Apr 28 '17 at 12:09

Refresh page on apache with React doesn't work

3 Answers3