I am hoping to create some middle ware whenever Vue router is used for example if someone where to do this.$router.push({//insertReq}).
I would like to read the details of what is in the push and either redirect their push or allow it for all Router requests across all components in the website.
Will fluxible app.rehydrate be called on every router change?
When is app.rehydrate getting called in the whole fluxible application lifecycle?
Rehydrate is called only first time when application is started on a client side (browser) to restore data that was used to render on a server. That is it's purpose, there is nothing to rehydrate when you navigating the app.
I cannot fully understand how a single page application can do routing by itself.
Maybe you can see the example here.
If you click on those links (below the visited, purple color link), the url and the page will be change without reloading. But how to achieve this if the front-end is deployed in a MVC framework?
Isn't that if you visit a url on MVC, it'll will look for the corresponding controller for that url? If that happen, of course the page will be reloaded isn't it? If it using HTML5 History, how can when I revisit the url, the page display the changed state?
Can someone explain how to achieve this with React app that deployed on a MVC framework like Rails? Thank you
I'm more familiar with Angular, but all the Single Page Applications (SPA) are based on the the same model. You have three layers:
the Rails MVC routing system with its routes and controllers
the React SPA routing system (that also has its own
routes and controller system)
the React event handling system that, as a javascript framework, among other things, catches mouse clicks in the web application
In your reactrails example page, the root of your web site (/) is handled by Rails, and every other pages (/*) are intercepted and handled by the react routing system.
So basically, if you have a rails ApplicationController you could have a config/routes.rb like this:
# routes.rb
root 'application#main'
# catch every routes and serve only the Application.main action
match '*path', to: 'application#main'
# application_controller.rb
class ApplicationController
def main
end
end
This will redirect every urls coming to Rails (/this/is/an/example, /that/one/is/not/an/example...) to the React router. (Note that you could also have other routes such as /api/gimme/my/damn/json/data that will resolve to other controllers and send back JSON, xml, html or any kind of data)
Then, in your html page, React intercepts every clicks, on links or buttons, and compare them to its own routes.
If a route match, it will display the correct page via its templating system, (usually loading it by Ajax or read it from its cache), and you won't see any page reload. You could say that react act has a client-side server.
If you call a url such as /i/like/flowers, the route will be first processed by rails (/*), that will send you an html file located at the / route, containing your SPA app, that will kicks in, analyse the route itself, and show you the correct content from its own templating system.
So to sum up, you have:
GET /my/super/react/url
//=> Rails serves `main.html` that includes `react-router`
Once main.html is loaded, react-router looks at its routes components and serve the right template if route exists (/my/super/react/url).
You could find more examples in the react-router documentation
This is the basic scenario, and I'm sure others will complete anything I didn't cover, and add react specific samples!
I would like to create an app in koa that would render react components when user hits the address bar, and after that a react-router client side to navigate through the links inside that rendered react component. is that possible? I want the initial load to be SEO friendly. i cant provide code yet but eager to listen to all of you suggestions and answers.
This will be the wanted flow:
User hits ther server (ex: localhost:3123/) --> KOA will render the react component that will be shown (this component has react router links on it) --> User navigate through the links (this time i dont want to hit the server again, so i want the react router on this side to trigger the routing.
It doesnt matter if the source code when routing through client side will not change, all i want to have is the source code of the initial react component when the user first hits the server. is this possible?
I have not done any serverside rendering, since I have developed mobile apps most of the time, which has the assets available on clientside.
Maybe look at this Demo to get your head around this:
https://github.com/rackt/react-router-mega-demo
I'm using Express framework on NodeJS (hosted by Heroku) to create my web site. I'm also using the React framework to create my components.
I have several HTML files with divs inside and React components which can be rendered in those divs.
When a user chooses a route (e.g. /movies) I want to be able to associate one HTML file with a component and return it back to the user. I already looked for a solution, but all of them talk about server-side rendering and sending back HTML files.
Is there another solution?
Check out react router you don't have to use server side rendering, you just need to give a react component that you want to return when a route is requested.
The standard way to do this now is to build a Single-Page applications and redirect all requests to /, and the front end routing will handle the required page to load.