We are building reactJS outside of AEM 6.2 and it works well. After it is added into AEM (v6.2) as a component with AEM templates, it works well except for the routing. Instead of using reactJS routes, the browser tries to load the pages under the AEM folder, which definitely hits 404 error. Any suggestion on how to make the reactJS route work on AEM 6.2? Tks.
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'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?
Hello I'm writing a web content website with React and I'm using React router dom for routing. I want to deploy my website but I need to know if I have to buy a node js host or a regular host. After searching figured out that if I use Hashrouter instead of Browserrouter, I can deploy it without server but there is a problem because hashrouter adds a prefix # on all of my links. What should I do to remove # or is there any other solution?
Situation:
I'm building a React app with React Router.
It was generated from create-react-app.
I need to host it statically.
If I visit the home page first and then click around, everything works fine.
Problem:
When visiting a sub page directly such as https://www.example.com/path/page server returns 404 error because /path/page is not a valid directory on the server.
For as far as I can tell, the server is just serving up files statically, and I cannot change how the server is written (I know I could solve this problem by routing all accesses to the react app with some server code, but this is not an option).
How can I make all urls directly visitable by only changing code in my react app?
After some research, I figured out that what I needed was a static site generator.
There are a couple of options available that works with React.js
React Static
Gatsby
Next JS
Some useful articles on getting started:
For Gatsby: https://medium.com/codingthesmartway-com-blog/gatsby-static-site-generator-for-react-introduction-b9fce7df6b24
For React Static: https://medium.com/#tannerlinsley/%EF%B8%8F-introducing-react-static-a-progressive-static-site-framework-for-react-3470d2a51ebc
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.