How to integrate React app into Wordpress (react router)?

debugcn 投稿 Dev

think-serious

I've created a react app to embed to wordpress site. React app is created by create-react-app and after bundling, I've uploaded it to wordpress site. Then created a page to load the bundled js file. (following this guide https://medium.com/@CodeCareerCoach/react-app-inside-a-wordpress-page-or-post-4c7d38181b3d)

So it shows the react app and works for the base route.

When I navigate, it still works, when I refresh I get 404 ERR.

This is the routing of react app.

  return <BrowserRouter basename='/testweb'>
    <Layout menuItems={menuItems} pages={pages}>
      <Switch>
          <Route exact path="/" render={() => <div>okay</div>} />
          <Route exact path="/home" render={(props) => {
              return <div>asdf</div>
            }} 
          />
...
          <Route render={(props)=> props.location.pathname } />
      </Switch>
    </Layout>
  </BrowserRouter>

in package.json, I've set homepage to /testweb How can I get the nested routes working?

think-serious

I found my own answer. Please share a better one if you have.

Let's say our app's name is testweb.

First, changed homepage attribute in package.json to another,
testweb-react.
Kept the routing as it is(using testweb as base url).
Uploaded build files to root of wordpress site.
Created /testweb/.htaccess file to internally redirect to testweb-react

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ – [L]
RewriteRule ^ /testweb-react/ [L]
</IfModule>

Hope this helps others also!

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]