Keep Server Online
If you find the Apache Lounge, the downloads and overall help useful, please express your satisfaction with a donation.
or
A donation makes a contribution towards the costs, the time and effort that's going in this site and building.
Thank You! Steffen
Your donations will help to keep this site alive and well, and continuing building binaries. Apache Lounge is not sponsored.
| |
|
 Topic: React router in wordpress theme with REST API plugin |
|
| Author |
|
Imonitmedia
Joined: 29 Jul 2020
Posts: 2
Location: London
|
 Posted: Wed 29 Jul '20 12:16 Post subject: React router in wordpress theme with REST API plugin |
 |
|
Hey guys I need some help with my React app using wordpress. Ive created a theme in wordpress which is basically my react app. I am using wordpress to serve my app using the REST API plugin. I have been able to get my app working, and successfully fetch data from the plugin api endpoint.
I cant get routing to work with my react app though, and I think this might be down to configuring the .htaccess.
So in my site I need all /wp- folders to work, but all other folders that I set in my <Route> in my react app need to be picked up by <BrowserRouter>
I am going round in circles trying to get this to work, if anyone can help me out that would be amazing!
This is the built code which my theme is using, react successfully runs and fetches the data from the endpoint
| Code: |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/wp-content/themes/one-page-app/build/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link
rel="apple-touch-icon"
href="/wp-content/themes/one-page-app/build/logo192.png"
/>
<link
rel="manifest"
href="/wp-content/themes/one-page-app/build/manifest.json"
/>
<title>React App</title>
<link
href="/wp-content/themes/one-page-app/build/static/css/main.5f361e03.chunk.css"
rel="stylesheet"
/>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>
!(function (e) {
function t(t) {
for (
var n, l, p = t[0], f = t[1], a = t[2], c = 0, s = [];
c < p.length;
c++
)
(l = p[c]),
Object.prototype.hasOwnProperty.call(o, l) &&
o[l] &&
s.push(o[l][0]),
(o[l] = 0);
for (n in f)
Object.prototype.hasOwnProperty.call(f, n) && (e[n] = f[n]);
for (i && i(t); s.length; ) s.shift()();
return u.push.apply(u, a || []), r();
}
function r() {
for (var e, t = 0; t < u.length; t++) {
for (var r = u[t], n = !0, p = 1; p < r.length; p++) {
var f = r[p];
0 !== o[f] && (n = !1);
}
n && (u.splice(t--, 1), (e = l((l.s = r[0]))));
}
return e;
}
var n = {},
o = { 1: 0 },
u = [];
function l(t) {
if (n[t]) return n[t].exports;
var r = (n[t] = { i: t, l: !1, exports: {} });
return e[t].call(r.exports, r, r.exports, l), (r.l = !0), r.exports;
}
(l.m = e),
(l.c = n),
(l.d = function (e, t, r) {
l.o(e, t) ||
Object.defineProperty(e, t, { enumerable: !0, get: r });
}),
(l.r = function (e) {
"undefined" != typeof Symbol &&
Symbol.toStringTag &&
Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }),
Object.defineProperty(e, "__esModule", { value: !0 });
}),
(l.t = function (e, t) {
if ((1 & t && (e = l(e)), 8 & t)) return e;
if (4 & t && "object" == typeof e && e && e.__esModule) return e;
var r = Object.create(null);
if (
(l.r(r),
Object.defineProperty(r, "default", { enumerable: !0, value: e }),
2 & t && "string" != typeof e)
)
for (var n in e)
l.d(
r,
n,
function (t) {
return e[t];
}.bind(null, n)
);
return r;
}),
(l.n = function (e) {
var t =
e && e.__esModule
? function () {
return e.default;
}
: function () {
return e;
};
return l.d(t, "a", t), t;
}),
(l.o = function (e, t) {
return Object.prototype.hasOwnProperty.call(e, t);
}),
(l.p = "/wp-content/themes/one-page-app/build/");
var p = (this.webpackJsonpfrontend = this.webpackJsonpfrontend || []),
f = p.push.bind(p);
(p.push = t), (p = p.slice());
for (var a = 0; a < p.length; a++) t(p[a]);
var i = f;
r();
})([]);
</script>
<script src="/wp-content/themes/one-page-app/build/static/js/2.80f2f005.chunk.js"></script>
<script src="/wp-content/themes/one-page-app/build/static/js/main.f7d944a2.chunk.js"></script>
</body>
</html> |
|
|
| Back to top |
|
James Blond
Moderator
Joined: 19 Jan 2006
Posts: 7371
Location: Germany, Next to Hamburg
|
| Posted: Wed 29 Jul '20 21:18 Post subject: |
|
|
| Please post the content of your .htaccess file. I think you need to modify the rewrite rule for that. (maybe) |
|
| Back to top |
|
Imonitmedia
Joined: 29 Jul 2020
Posts: 2
Location: London
|
| Posted: Wed 29 Jul '20 21:37 Post subject: |
|
|
Because Im using the RESt API plugin the wordpress permalinks must be set to Post name. And so Wordpress auto generates the following htaccess file
# BEGIN WordPress
# The directives (lines) between `BEGIN WordPress` and `END WordPress` are
# dynamically generated, and should only be modified via WordPress filters.
# Any changes to the directives between these markers will be overwritten.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
So the thing is, how do I modify this so I can still use wordpress admin, access the JSOn feed at wp-json and also enable react router? |
|
| Back to top |
|
James Blond
Moderator
Joined: 19 Jan 2006
Posts: 7371
Location: Germany, Next to Hamburg
|
| Posted: Fri 31 Jul '20 11:22 Post subject: |
|
|
Everything is redirected to the index.php. You can exclude your react path from that. See the example.
| Code: | <IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteRule ^/(dir_name|file_name\.extension|and_so_on) - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress |
|
|
| Back to top |
|
|
|
|
|
|
