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.
Related
I'm working on this web app that include several pages.
I really would know if it's better handle the router in the backend (Node.js) or in the frontend (React.js) or with both (I didn't understand in the Internet).
For example, how have I to work with the login page (that will re-direct on the user area).
Thanks
I don't know how big your project is, or its requirements, but if this is a personal project I would suggest using the React Router Library. You can make a call to your Express app from the Front, and based on the response you get back you can route the user to wherever.
In a project of mine I had an express route for login that looked for the user in a database, then checked to see if they provided the correct password. If the user provided the wrong password or if the account wasn't found I sent back an error message. If the user provided the right password I sent a success message to the front. I would listen for the response on the frontend, if I received a success message, I would call useNavigate from React Router to route the user to the user page.
Here is the documentation for React Router Dom: https://www.npmjs.com/package/react-router-dom
If this is a bigger project and you need to think about accessibility and search engine optimization, you would have to find a way to render React from the backend. Its called server side rendering, which I'm not familiar with.
Hope this helps a little.
I am trying to learn to react front end by creating a simple frontend website. My goal is simple I want to implement a login menu when I run the app. The user will log in through this window and if the user is a regular user it will redirect the user to a new component call regular.js. If the user is admin then redirect the user to another page lets calls that admin.js. I have been trying to understand how to redirect in react. Like in javascript I can write if Credentials match then go to this page can I do that too in react? However, I do not want the user to log out automatically when the redirect happens. I am not sure how to approach it because I read other answers saying use hooks but then some said use routes as well. I am providing the App.js, index.js, and loginForm.js file underneath, any direction will be helpful or documents to refer to like guide me to do this will be helpful. I am not looking for a design or any content on the new pages I just want the redirect to work while the user is logged in.
You should not handle login on the front end with React states, there is 0 security in this. You should look into how to implement authentication, consider reading through some tutorials like this one: https://bezkoder.com/react-express-authentication-jwt/
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
Trying to build a web client application with backbone aura. Struggling to add router to the application. did anyone try adding router to backbone aura yet?
I don't know about Backbone router, but I built a simple router that listens to every message each component send and update the URL, and listens for every change in URL and sends specific messages. As an extension I couldn't make it work (because it would render before the components that needed to listen for its messages -- at least the first based on the initial URL), so I built it as a component.