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
Related
This question already has answers here:
React Router not working with Github Pages
(4 answers)
Closed 9 months ago.
Routing of the app
Json package
i can't figure out why it's not rendering anything and shows 404 page if i manually navigate to other page
I had same problem once, The problem was that my webserver was serving "index.html" only for the root route ("/")
I configured the webserver in a way that all the routes (or only the ones that you are using) will serve index.hml. Please try to check this.
Based on the screenshot provided, it appears that the project https://packirisamykaran.github.io/daily-thoughts is hosted using GitHub pages. React Router can be used, but you would have to switch to hashHistory instead of browserHistory so that it works with GitHub Pages.
The Notes on client-side routing from the create-react-app.dev website basically provide two options as workarounds:
You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to hashHistory for this effect, but the URL will be longer and more verbose (for example, http://user.github.io/todomvc/#/todos/42?_k=yknaj). Read more about different history implementations in React Router.
Alternatively, you can use a trick to teach GitHub Pages to handle 404s by redirecting to your index.html page with a custom redirect parameter. You would need to add a 404.html file with the redirection code to the build folder before deploying your project, and you’ll need to add code handling the redirect parameter to index.html. You can find a detailed explanation of this technique in this guide.
Thanks to #DrewReese, for clarifying this.
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?
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
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 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?