Hi i'm using Create React App and React Redux Router.
I'm wondering if a problem i'm seeing is not really a problem. While i'm still in development i haven't pointed my domain at my new Heroku app. So the way i'm previewing my build 'online' is via the dyno name ........
https://pauliescanlon-io.herokuapp.com/
My React app seems to work fine, all routes work etc but if i hit refresh on any route other than home page, eg....
https://pauliescanlon-io.herokuapp.com/work
i get an nginx 404 error from Heroku...
I'm wondering if this is just because when previewing on Heroku the url has a "." in it and when i link up my domain this won't be an actual problem?
I'm using the "next" version of React Router Redux.
https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux
I can post my store.js and index.js if it'll help?
but... does anyone know if this is actually a problem or is it just because of the temporary way i'm seeing my build on the above URL?
Thanks
I had similar problem likely the custom routes need allowing via a .htaccess file, add one in the public directory:
RewriteRule ^(.*) /index.html [NC,L]
Related
I made a website with React and I used react router for routing, my problem is:
When on a non route page the browser is refreshed, I got the hostgator standard 404 page.
I know why is that and I looking for a solution like at netlify.
At netlify I can use a file named _redericets and the problem is solved.
I'm building a React plugin in Wordpress (for my own purposes).
I've used 'create-react-app', then 'yarn build' and then upload the production 'build' folder into Wordpress to a custom directory '/apps/my-custom-app/frontend/build'.
I've used this tutorial to create a Wordpress plugin that gets all the assets from the 'build' folder and renders the React App in the target div on a Wordpress page.
All of this works as expected, the React App renders on my Wordpress page "https://mywebsite.com/wp-page-slug/" and the React routing/navigation works fine ... but only within the React App.
The issue is that if I'm on a React page (except for the root slug) and refresh the browser, I end up getting a 404 error.
After researching on StackOverflow, I've found that this is resolved using the .htaccess file.
I've used this function from the solution in this article ...
add_action( 'init', 'my_custom_app_frontent_rewrite_rule' );
function my_custom_app_frontent_rewrite_rule() {
add_rewrite_rule('^react-app-root-url/(.+)?', 'index.php?pagename=wp-page-slug', 'top');
}
... to add a rewrite rule, but there's something wrong. When I enable it, the entire frontend of the website goes blank (white screen).
Is the 'add_rewrite_rule' not correct? I don't know what's wrong here.
Wordpress Permalinks are currently set to 'Post Name'.
The Wordpress page slug is '/wp-page-slug'.
The React App Router Base URL is '/react-app-root-url'.
And the homepage property in the React package.json file is '/apps/my-custom-app/frontend/build'.
Any assistance would be appreciated, thank you.
I have a question.
I created a react website and everything works perfectly on local development.
So if I go to localhost:8080/about I get on the about page.
When I build the website only an index.html gets made.
When I navigate the website from the index page, it all works, also the urls changes to /about when I go to the about page through the menu.
But when I go to www.website.com/about by typing in the address I get an error page.
Who can help me with this?
JayD
You need to setup your react router accordingly. Usually you need to add one extra file in your build files. Below is the tutorial on how to setup react router using fierbase and netlify. If you deploy somewhere else, please let me know. I can help you with that.
Firebase
Netlify
Problem:
I've deployed a React application to our internal cloud at my company. It works with Cloud Foundry. The app works really well, but there's one problem. Whenever I refresh the application and the URL isn't pointing to the root, for example myapp.ourcloud.com/my-route, I get a Error 404 from Nginx.
What I'm using:
The App is a simple React application. No special modules installed beside React Router V4. The Code is pretty simple, I'm using the BrowserRouter, as a child the application. There are only 3 components that ar simply routed with <Link To=.../> and <Route path={.../> ... as said, pretty basic.
What I've tried so far:
I have added a Staticfile in the root directory with pushstate: enabled as stated in the Cloud Foundry documentation.
I just found the answer by myself. I'll post it here for future users:
My manifest.yml file had the following content:
...
path: build/
...
You simply have to put the Staticfile inside the build/ folder from react and not in the project root. Also be careful, the Staticfile gets deleted everytime you build the project.
Serve index.html for all request and then the react router will manage all the routing.
If you however have endpoints or some backend routes you need to access, just make exception for these routes and serve index.html for everything else.
I have a React app which is created by create-react-app command.
And I also have the blog system which is based on Wordpress.
Directory structure is like this.
*/index.html
/service-workder.js
/manifect.json
/index.html
/favicon.ico
/asset-manifest.json
/static/media
/js
/css
/blog <--------------------- Wordpress*
When I access the URL by http:mydomain/blog/,
Firefox show React page instead of Wordpress page.
Firefox even show React page for http:mydomain/blog/nonexisting ,
which I think is supposed to provide 404 not found from web server.
I was struggling to find a way NOT to let React take wildcard paths.
Safari use React only for index.html, which is good.
Chrome, Firefox use React for entire wildcard paths, even for not existing paths.
http://myserver/ ---> should show React app
http://myserver/nonexistence ---> should show 404 from server
Please help me to figure out isolate React app only for exact index.html.
Thanks in advance.
Like I wrote here, the root cause was service worker which seems to be HTML5 feature to make a web site to a web app.
Unregistering service worker was the solution.