React routing in wordpressLoop inside React JSXFlask and React routingProgrammatically navigate using react routerReact app wrapped in Wordpress template leads to css problemsreact routing and django url conflictNested routes with react router v4react-meta-tags with Wordpress API server renderingRouting with React Router v4 in embedded React AppsLetting some routes be handled by Groovy and some by react-router v4React router v4 rendering issue
Horror movie about a virus at the prom; beginning and end are stylized as a cartoon
how to check a propriety using r studio
Why is 150k or 200k jobs considered good when there's 300k+ births a month?
Modeling an IP Address
Languages that we cannot (dis)prove to be Context-Free
What would happen to a modern skyscraper if it rains micro blackholes?
dbcc cleantable batch size explanation
Cross compiling for RPi - error while loading shared libraries
meaning of に in 本当に?
What's that red-plus icon near a text?
Can a Cauchy sequence converge for one metric while not converging for another?
Why doesn't a class having private constructor prevent inheriting from this class? How to control which classes can inherit from a certain base?
Why is consensus so controversial in Britain?
Which country benefited the most from UN Security Council vetoes?
Why "Having chlorophyll without photosynthesis is actually very dangerous" and "like living with a bomb"?
expand `ifthenelse` immediately
What does the "remote control" for a QF-4 look like?
NMaximize is not converging to a solution
How do I deal with an unproductive colleague in a small company?
Alternative to sending password over mail?
Could an aircraft fly or hover using only jets of compressed air?
What does "Puller Prush Person" mean?
Mortgage Pre-approval / Loan - Apply Alone or with Fiancée?
Can a monk's single staff be considered dual wielded, as per the Dual Wielder feat?
React routing in wordpress
Loop inside React JSXFlask and React routingProgrammatically navigate using react routerReact app wrapped in Wordpress template leads to css problemsreact routing and django url conflictNested routes with react router v4react-meta-tags with Wordpress API server renderingRouting with React Router v4 in embedded React AppsLetting some routes be handled by Groovy and some by react-router v4React router v4 rendering issue
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I'm building a react SPA with Wordpress running as the backend, but it's not headless, so the entire frontend is included in the theme. I simply run npm build and enqueue the production files in the functions.php file. The application is rendered into a <div id="root"></div> inside a template file. My wordpress install is set to have a static homepage, which uses the template that contains the React root div.
This seems to work just fine, apart from the Router. If I go to a different address, say https://mywebsite/about, it tries to load a wordpress page named about, rather than staying on the same page, and using the router to render the appropriate component. Is there something setting I have to change in the .htaccess file? Or is there something else I am missing?
wordpress reactjs .htaccess react-router
asked Mar 21 at 22:42
Rob TeeuwenRob Teeuwen
11012
add a comment |
I'm building a react SPA with Wordpress running as the backend, but it's not headless, so the entire frontend is included in the theme. I simply run npm build and enqueue the production files in the functions.php file. The application is rendered into a <div id="root"></div> inside a template file. My wordpress install is set to have a static homepage, which uses the template that contains the React root div.
This seems to work just fine, apart from the Router. If I go to a different address, say https://mywebsite/about, it tries to load a wordpress page named about, rather than staying on the same page, and using the router to render the appropriate component. Is there something setting I have to change in the .htaccess file? Or is there something else I am missing?
wordpress reactjs .htaccess react-router
asked Mar 21 at 22:42
Rob TeeuwenRob Teeuwen
11012
Do normal links in your SPA work fine? Is it just direct access to URL's that result in 404?
– Ian Loubser
Mar 21 at 22:44
I should have mentioned that. The links work fine (it changes the URL and renders the correct component). It only breaks when I enter a URL manually.
– Rob Teeuwen
Mar 21 at 22:51
It is still headless if you are using react only for the theme, and pulling data from WP Api. Headless doesn't imply that you cannot use it as a WP theme.
– Vlatko Vlahek
Mar 22 at 0:47
As far as I know, a headless website is one in which backend and frontend are completely independent. In this case, the frontend is embedded within backend, it is not stand alone. Some of the displayed data is pulled from the REST API, but some is rendered by php on first page load.
– Rob Teeuwen
Mar 22 at 9:52
add a comment |
I'm building a react SPA with Wordpress running as the backend, but it's not headless, so the entire frontend is included in the theme. I simply run npm build and enqueue the production files in the functions.php file. The application is rendered into a <div id="root"></div> inside a template file. My wordpress install is set to have a static homepage, which uses the template that contains the React root div.
This seems to work just fine, apart from the Router. If I go to a different address, say https://mywebsite/about, it tries to load a wordpress page named about, rather than staying on the same page, and using the router to render the appropriate component. Is there something setting I have to change in the .htaccess file? Or is there something else I am missing?
wordpress reactjs .htaccess react-router
asked Mar 21 at 22:42
Rob TeeuwenRob Teeuwen
11012
I'm building a react SPA with Wordpress running as the backend, but it's not headless, so the entire frontend is included in the theme. I simply run npm build and enqueue the production files in the functions.php file. The application is rendered into a <div id="root"></div> inside a template file. My wordpress install is set to have a static homepage, which uses the template that contains the React root div.
This seems to work just fine, apart from the Router. If I go to a different address, say https://mywebsite/about, it tries to load a wordpress page named about, rather than staying on the same page, and using the router to render the appropriate component. Is there something setting I have to change in the .htaccess file? Or is there something else I am missing?
wordpress reactjs .htaccess react-router
wordpress reactjs .htaccess react-router
asked Mar 21 at 22:42
Rob TeeuwenRob Teeuwen
11012
asked Mar 21 at 22:42
Rob TeeuwenRob Teeuwen
11012
asked Mar 21 at 22:42
Rob TeeuwenRob Teeuwen
11012
asked Mar 21 at 22:42
Rob TeeuwenRob Teeuwen
11012
asked Mar 21 at 22:42
Rob TeeuwenRob Teeuwen
11012
11012
Do normal links in your SPA work fine? Is it just direct access to URL's that result in 404?
– Ian Loubser
Mar 21 at 22:44
I should have mentioned that. The links work fine (it changes the URL and renders the correct component). It only breaks when I enter a URL manually.
– Rob Teeuwen
Mar 21 at 22:51
It is still headless if you are using react only for the theme, and pulling data from WP Api. Headless doesn't imply that you cannot use it as a WP theme.
– Vlatko Vlahek
Mar 22 at 0:47
As far as I know, a headless website is one in which backend and frontend are completely independent. In this case, the frontend is embedded within backend, it is not stand alone. Some of the displayed data is pulled from the REST API, but some is rendered by php on first page load.
– Rob Teeuwen
Mar 22 at 9:52
add a comment |
Do normal links in your SPA work fine? Is it just direct access to URL's that result in 404?
– Ian Loubser
Mar 21 at 22:44
I should have mentioned that. The links work fine (it changes the URL and renders the correct component). It only breaks when I enter a URL manually.
– Rob Teeuwen
Mar 21 at 22:51
It is still headless if you are using react only for the theme, and pulling data from WP Api. Headless doesn't imply that you cannot use it as a WP theme.
– Vlatko Vlahek
Mar 22 at 0:47
As far as I know, a headless website is one in which backend and frontend are completely independent. In this case, the frontend is embedded within backend, it is not stand alone. Some of the displayed data is pulled from the REST API, but some is rendered by php on first page load.
– Rob Teeuwen
Mar 22 at 9:52
Do normal links in your SPA work fine? Is it just direct access to URL's that result in 404?
– Ian Loubser
Mar 21 at 22:44
Do normal links in your SPA work fine? Is it just direct access to URL's that result in 404?
– Ian Loubser
Mar 21 at 22:44
I should have mentioned that. The links work fine (it changes the URL and renders the correct component). It only breaks when I enter a URL manually.
– Rob Teeuwen
Mar 21 at 22:51
I should have mentioned that. The links work fine (it changes the URL and renders the correct component). It only breaks when I enter a URL manually.
– Rob Teeuwen
Mar 21 at 22:51
It is still headless if you are using react only for the theme, and pulling data from WP Api. Headless doesn't imply that you cannot use it as a WP theme.
– Vlatko Vlahek
Mar 22 at 0:47
It is still headless if you are using react only for the theme, and pulling data from WP Api. Headless doesn't imply that you cannot use it as a WP theme.
– Vlatko Vlahek
Mar 22 at 0:47
As far as I know, a headless website is one in which backend and frontend are completely independent. In this case, the frontend is embedded within backend, it is not stand alone. Some of the displayed data is pulled from the REST API, but some is rendered by php on first page load.
– Rob Teeuwen
Mar 22 at 9:52
As far as I know, a headless website is one in which backend and frontend are completely independent. In this case, the frontend is embedded within backend, it is not stand alone. Some of the displayed data is pulled from the REST API, but some is rendered by php on first page load.
– Rob Teeuwen
Mar 22 at 9:52
add a comment |
1 Answer
1
active
oldest
votes
Yes, the answer lies inside the .htaccess file.
You need to set up a catchall rule, which will serve index.php file for all routes instead of trying to find a matching php file for the route which is happening now.
You should be able to use this config to achieve such behaviour:
# BEGIN WordPress
<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
Solution does imply you are using modrewrite on your server.
answered Mar 22 at 0:36
Vlatko VlahekVlatko Vlahek
759613
This worked indeed, but I found out that in addition I needed to turn off permalinks (via dashboard -> settings -> permalinks -> set to 'plain'). Prior to this, when all traffic was being routed to index.php, the wordpress router was catching this traffic before the react router.
– Rob Teeuwen
Mar 22 at 9:59
Strange, I'm using custom Post Name or Custom Structure permalinks with this config without issues
– Vlatko Vlahek
Mar 22 at 10:52
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55290310%2freact-routing-in-wordpress%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Yes, the answer lies inside the .htaccess file.
You need to set up a catchall rule, which will serve index.php file for all routes instead of trying to find a matching php file for the route which is happening now.
You should be able to use this config to achieve such behaviour:
# BEGIN WordPress
<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
Solution does imply you are using modrewrite on your server.
answered Mar 22 at 0:36
Vlatko VlahekVlatko Vlahek
759613
This worked indeed, but I found out that in addition I needed to turn off permalinks (via dashboard -> settings -> permalinks -> set to 'plain'). Prior to this, when all traffic was being routed to index.php, the wordpress router was catching this traffic before the react router.
– Rob Teeuwen
Mar 22 at 9:59
Strange, I'm using custom Post Name or Custom Structure permalinks with this config without issues
– Vlatko Vlahek
Mar 22 at 10:52
add a comment |
Yes, the answer lies inside the .htaccess file.
You need to set up a catchall rule, which will serve index.php file for all routes instead of trying to find a matching php file for the route which is happening now.
You should be able to use this config to achieve such behaviour:
# BEGIN WordPress
<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
Solution does imply you are using modrewrite on your server.
answered Mar 22 at 0:36
Vlatko VlahekVlatko Vlahek
759613
This worked indeed, but I found out that in addition I needed to turn off permalinks (via dashboard -> settings -> permalinks -> set to 'plain'). Prior to this, when all traffic was being routed to index.php, the wordpress router was catching this traffic before the react router.
– Rob Teeuwen
Mar 22 at 9:59
Strange, I'm using custom Post Name or Custom Structure permalinks with this config without issues
– Vlatko Vlahek
Mar 22 at 10:52
add a comment |
Yes, the answer lies inside the .htaccess file.
You need to set up a catchall rule, which will serve index.php file for all routes instead of trying to find a matching php file for the route which is happening now.
You should be able to use this config to achieve such behaviour:
# BEGIN WordPress
<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
Solution does imply you are using modrewrite on your server.
answered Mar 22 at 0:36
Vlatko VlahekVlatko Vlahek
759613
Yes, the answer lies inside the .htaccess file.
You need to set up a catchall rule, which will serve index.php file for all routes instead of trying to find a matching php file for the route which is happening now.
You should be able to use this config to achieve such behaviour:
# BEGIN WordPress
<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
Solution does imply you are using modrewrite on your server.
answered Mar 22 at 0:36
Vlatko VlahekVlatko Vlahek
759613
answered Mar 22 at 0:36
Vlatko VlahekVlatko Vlahek
759613
answered Mar 22 at 0:36
Vlatko VlahekVlatko Vlahek
759613
answered Mar 22 at 0:36
Vlatko VlahekVlatko Vlahek
759613
759613
This worked indeed, but I found out that in addition I needed to turn off permalinks (via dashboard -> settings -> permalinks -> set to 'plain'). Prior to this, when all traffic was being routed to index.php, the wordpress router was catching this traffic before the react router.
– Rob Teeuwen
Mar 22 at 9:59
Strange, I'm using custom Post Name or Custom Structure permalinks with this config without issues
– Vlatko Vlahek
Mar 22 at 10:52
add a comment |
This worked indeed, but I found out that in addition I needed to turn off permalinks (via dashboard -> settings -> permalinks -> set to 'plain'). Prior to this, when all traffic was being routed to index.php, the wordpress router was catching this traffic before the react router.
– Rob Teeuwen
Mar 22 at 9:59
Strange, I'm using custom Post Name or Custom Structure permalinks with this config without issues
– Vlatko Vlahek
Mar 22 at 10:52
This worked indeed, but I found out that in addition I needed to turn off permalinks (via dashboard -> settings -> permalinks -> set to 'plain'). Prior to this, when all traffic was being routed to index.php, the wordpress router was catching this traffic before the react router.
– Rob Teeuwen
Mar 22 at 9:59
This worked indeed, but I found out that in addition I needed to turn off permalinks (via dashboard -> settings -> permalinks -> set to 'plain'). Prior to this, when all traffic was being routed to index.php, the wordpress router was catching this traffic before the react router.
– Rob Teeuwen
Mar 22 at 9:59
Strange, I'm using custom Post Name or Custom Structure permalinks with this config without issues
– Vlatko Vlahek
Mar 22 at 10:52
Strange, I'm using custom Post Name or Custom Structure permalinks with this config without issues
– Vlatko Vlahek
Mar 22 at 10:52
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55290310%2freact-routing-in-wordpress%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Do normal links in your SPA work fine? Is it just direct access to URL's that result in 404?
– Ian Loubser
Mar 21 at 22:44
I should have mentioned that. The links work fine (it changes the URL and renders the correct component). It only breaks when I enter a URL manually.
– Rob Teeuwen
Mar 21 at 22:51
It is still headless if you are using react only for the theme, and pulling data from WP Api. Headless doesn't imply that you cannot use it as a WP theme.
– Vlatko Vlahek
Mar 22 at 0:47
As far as I know, a headless website is one in which backend and frontend are completely independent. In this case, the frontend is embedded within backend, it is not stand alone. Some of the displayed data is pulled from the REST API, but some is rendered by php on first page load.
– Rob Teeuwen
Mar 22 at 9:52