I’m using React-router and it works fine while I’m clicking on link buttons, but when I refresh my webpage it does not load what I want.
For instance, I am in localhost/joblist and everything is fine because I arrived here pressing a link. But if I refresh the webpage I get:
Cannot GET /joblist
By default, it didn’t work like this. Initially I had my URL as localhost/#/ and localhost/#/joblist and they worked perfectly fine. But I don’t like this kind of URL, so trying to erase that #, I wrote:
Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(
});
This problem does not happen with localhost/, this one always returns what I want.
This app is single-page, so /joblist doesn’t need to ask anything to any server.
My entire router.
var routes = (
);
Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(
});
The first big thing to know about this is that the URL is 1 in \’the old days\’.\’ When life was simple, some user was sent a request to the server\’s site, which was deemed the route route, while the request was made by the Web-side API (not the case case) and was not prompted to make any request for the HTTP HTTP-backback, so when you request the client-to-demand, it will be an immediate response to any server-related request, and when it is re-outout response response is an address address-responsive response, but when your request is returned to 404 response-URLURL-router. For example, if you want the http://example.com/##/client-side routing for you, but they fail on the server side unless you make your server-specific URL understands them. If you request the HTTP-URL-to-route route to work on both the serveur- and the client-tailtail URL, via a catch-all route that returns the full-length URL URL (back-backback) URL to url-loglog-pathpath- path-urlurl.\n\nThis approach does not allow for \’ugly\’ URLs Server-side rendering. As far as search engine optimization (SEO) is concerned, your website is a single page with almost no content on it.\n\nCatch-all With this approach, you use the Browser History, but just set up a /* to index.html on the server, giving you much the same situation as with Hash History. You have clean URLs but you could improve upon this scheme later without having to invalidate all your favorite.\n\nMore complicated to setup Still no good seo?\n\nHybrid In the hybrid approach takes on the catch-all scenario by adding specific scripts for specific routes. You could write a simple PHP script to return the most important pages of your site with content, so Googlebot can at least see what\’s on your page.\n\nEven more complicated to set up Only good SEO for those routes you provide the special treatment Duplicating code for rendering content on server and client.\n\nWe use Node.js as our server so we can run the same JavaScript code on both ends. Now we have all our routes defined in one react-router configuration and don\’t need to copy our rendering code to speak. This is \’the holy grail\’ so that the server sends the exact same markup as we would have if the page transition had happened on the client.This solution is best for SEO.\n\nI have used Java with Nashorn but it\’s not working for me. It is mostly a Node.js based server. Many hard environmental problems (using window on server-side, etc.) Steep learning curve.\n\nI think the catch-all is easy enough to set up so that I can improve on things over time. If you are already using Node.js as your server platform, yes, it\’s a very elegant solution to the problem. But once you get the hang of it (also known as \’universal\’) solution, you\’ll be doing an isomorphic app. Basically, if you want to learn more about it, then I would go for the Catch- all solution and just expand on it would be the answer to this problem (Hybrid solution) as time progresses and SEO requirements.\n\nReact to the future: Isomorphic apps The Pain and the Joy of making isotope apps in ReactedJS: How to implement Node + JavaScript & Why it Matters .\n\nAlso, to get you started, I suggest looking at starter kits. Pick one that matches your choice for the technology stack (remember, React is just the V in MVC, you need more stuff to build a full app). Start with the look at the one published by Facebook itself: .\n\nCreate React App?\n\nNow there is a nice site that attempts to index all of them: Or choose one of the many by the community: .\n\nWhich is the best React starter project you can do?\n\nI started with these: .\n\nReact Isomorphic Starterkit Redux Universal Hot Example: .\n\nI have a home brewed version of universal rendering based on the two starter kits above, but they are out of date. Good luck with your search!
