0

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.

StudioTime
  • 22,603
  • 38
  • 120
  • 207

2 Answers2

2

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>
StudioTime
  • 22,603
  • 38
  • 120
  • 207
0

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

Matt H
  • 1,795
  • 1
  • 7
  • 8
  • I already have that in place as you can see from the OP, I have the default routing to index.html set up. – StudioTime Jan 09 '19 at 20:30
  • I have limited experience writing .htaccess files, but based on the question I linked, "you're just matching on `.` which is one instance of any character, you need at least `.*` to match any number of instances of any character." – Matt H Jan 09 '19 at 20:33
  • Apologies, I should have said, I did try what the other answer suggested but did not change anything - I will update the question – StudioTime Jan 09 '19 at 20:38
  • If that didn't work, I would suggest doing some basic sanity checks on your setup to make sure rewriting is working as intended. For example, it looks like you may be missing `RewriteEngine on`. – Matt H Jan 09 '19 at 20:43
  • Good shout but as I said, it works perfectly for non dynamic pages so all is working as it should, apart from dynamic pages – StudioTime Jan 09 '19 at 20:51