logo
Apache Lounge
Webmasters

 

About Forum Index Downloads Search Register Log in RSS X


Keep Server Online

If you find the Apache Lounge, the downloads and overall help useful, please express your satisfaction with a donation.

or

Bitcoin

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.
Post new topic   Forum Index -> Coding & Scripting Corner View previous topic :: View next topic
Reply to topic   Topic: React router in wordpress theme with REST API plugin
Author
Imonitmedia



Joined: 29 Jul 2020
Posts: 2
Location: London

PostPosted: Wed 29 Jul '20 12:16    Post subject: React router in wordpress theme with REST API plugin Reply with quote

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: 7360
Location: Germany, Next to Hamburg

PostPosted: Wed 29 Jul '20 21:18    Post subject: Reply with quote

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

PostPosted: Wed 29 Jul '20 21:37    Post subject: Reply with quote

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: 7360
Location: Germany, Next to Hamburg

PostPosted: Fri 31 Jul '20 11:22    Post subject: Reply with quote

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


Reply to topic   Topic: React router in wordpress theme with REST API plugin View previous topic :: View next topic
Post new topic   Forum Index -> Coding & Scripting Corner