I've got a Reactjs web application at example.com
It has routes at example.com/subpage1 ... example.com/subpage2 ...etc. Anything I go to at example.com/* loads my react app.
I'd like to let an existing vanilla javascript page load when someone goes to example.com/differentPageEntirely
How can I do this?
Related
I have converted my React.js app to Next.js
Now i wanted to route to my blog details page on click of card on blog page
I am taking data from heroku api.
In react i was doing it using react-router-dom
How to do it in next.js ?
this page can help you to make your dynamic routing:
Next Dynamic Routing
Inside pages folder:
File and Directory are self routes concepts:
pages/test.js works for localhost:3000/test
pages/test1/test.js works for localhost:3000/test1/test
Similarly:
pages/post/[pid].js works for localhost:3000/post/a OR localhost:3000/post/111 etc
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
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.
I have a react app that's hosted on AWS Cloudfront, and the default root is set to index.html, which loads the react app.
So far so good.
I created a new html page page1.html, and then tried accessing it using the full URL, https://my.site.com/page1.html.
Uh oh.
The React app is loaded, and it's router intercepted the URL, and displayed the page not found error. React has no knowledge of the html page, which sounds about right.
If the cache is cleared the page1.html file loads correctly, however as soon as the react app is loaded, the react router starts intercepting the page1.html URL.
Why is that? I kind of expected the direct URL to load the html file bypassing the react app.
And is there a way to add an exception in react router to allow the page to be loaded without being intercepted?
We have angularjs app with lot of js getting loaded during the initial page load. Which are not required as part of home page. How we can void these. Is requieedjs solve this. How and when other js files get loads.
requirejs can be troublesome to use with angular
use following:
https://oclazyload.readme.io/docs