Develop Reference

Accessing react components directly from URL

I am trying to create an new react app. I have 3 components: app (with login functionality) , admin and client.
How can I render (redirect to) admin / client based on a value (user role) , after successfully login?
Is this any way to access the admin / client components directly from the URL? More specific, localhost:3000 takes me to App.js (witch makes sense, because it is defined like this in index.js). If I want to see directly the admin component (hijacking the login), can I use for example localhost:3000/admin ? how can I do that?
Thank you !

You can use react router and in particular route.push('/admin')
You need to define the '/admin' route and voilà.
To bypass the login, you may want to make a 'test-admin' route and a private 'admin' route. Here is how to make a private route if you happen to need it:
https://dev.to/karanpratapsingh/private-public-and-restricted-routes-in-react-42ff

You can use react-router, that allow to define some route based on URL.
When you have a login feature, then you would probably wants to have some protected route, that are only accessible when you are logged in.
Then I recommend you to read this article

Vue dynamic route prerender

I'm working on a Vue project and I've got an issue.
I would like to prerender some dynamic routes when I am in a particular route.
In my project, I have a /works route which displays a list of several items. Each item
has a router-link that sends to his /work/workID route and renders the workpage component. As this is a dynamic route, Vue does not prerender these routes and each time I load, I have a 500ms delay of images loaded.
My images url are store in Vuex and the images are upload in a public google drive folder.
I think that I should use something like that :
let matched = router.resolve(work/workID).resolved.matched;
let route = matched[matched.length -1];
route.components.default.render;
But my images are still loading on mounted.
Hope someone know the issue ;)

Found a way to resolve it.
I declare my dynamic route props to true, then render and hide all the dynamic components in my works pages. That work perfectly.
I can't find the way to pass route params or even props to a component with the router.resolve(path) method. Someone would know how to do ?

What is the proper way of using client-side routing?

I have a question regarding AngularJS and Node.js.
I have a web application and I use client-side routing with routeProvider to navigate through the pages of my web application.
And I get the data through a RESTful API server-side. But all of logic is done in AngularJS, because with the client-side routing, all I do in Node.js is :
exports.partials = function(req, res, err) {
var name = req.params.name;
res.render(name);
};
So, I only use Node.js to render the template layout and the partial view, but all of the logic is in AngularJS.
Is it the proper way to use it?

Angular.js is a javascript framework to create a SPA or Single page application.
It creates its own navigation system using the hash(#) or hashbang(#!) in the url to represent the different states or pages of your application but all this happens in your home page. The browser never changes to another page because all application state will be lost in a page refresh (HTTP is a stateless protocol).
Usually you need 3 parts to create an Angular application each one with it's own routing system.
Your angular application: All the scripts and resources are loaded in the home page. The routing system is provided by $routeProvider and the hash(#). Eg: http://mywebsite/#/products or http://mywebsite/#/providers. All this is relative to your home page.
Your templates: This is retrieved using ajax and can be routed however you want, Eg: http://mywebsite/product.html or http://mywebsite/templates/product.html serving static html files or even http://mywebsite/templates/products using a restful approach and a server side routing mechanism. There is no general rule here because basically depends on the server technologies chosen and your own design.
Your data: Usually a Resful API to supply you application with business data stored in a database. Rest creates some basic rules you must follow like treat everything as a resource and manipulate it with verbs. Eg: GET http://mywebsite.com/api/products or POST http://mywebsite.com/api/providers
This is an example of an Angular route provider
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/Book/:bookId/ch/:chapterId', {
templateUrl: 'chapter.html',
controller: 'ChapterController'
});
In this case angular will fetch your home page from http://mywebsite.com initially and the template from the content of your chapter.html file located in http://mywebsite.com/chapter.html and your data from whatever configuration you set to your $http service. As long as you set your routes in a way that don't conflict with each other you are safe. In your case you can use express.js to create a restful routing system for your templates or serve them directly from the public folder as html.

Chaplin js permanent controller that responds to routes

Is it possible to have a controller that keeps its state alive and also responds to routes?
For example I would have a PlayerController that I initiate in the application's initControllers method and then I will need it also to respond to a route like /player/trackID so I can change the current playing track.

Yes, you can create a controller which will be active for the lifetime of the application. As you mentioned instantiate PlayerController in initControllers method of the application and in routes.js define the route /player/:trackID to be bound to a specific method of the PlayerController.
e.g. route in routes.js will look like
match('player/:trackID', 'player#playTrack', {name:'playtrack'});
In the above route playTrack is the method of PlayerController.

Multiple routers vs single router in BackboneJs

All examples on Backbone I've seen use one router for the whole application, but wouldn't it make sense to have a router for each single part of your app (header, footer, stage, sidebar)? Has anyone built apps with more than one router and what are your experiences?
Let's think about a complex app with nested views: Wouldn't it be better when a view has its own router that handles the display of the subviews, than having one big router that has to inform the main view to change its subviews?
The background of this question: I've see a lot of parallels of the router in backbone and the ActivityMapper in GWT. The ActivityMapper is only responsible to get the right presenter for a given route and a given container in the DOM.

i wrote an app (still writing) with multiple routers in it.
however it is not like you think, it is more module based and not a router per view or anything like that.
for example,
say i got two big modules in my app, 1 handling all books, and 1 for the users.
books have multiple views (as do users), a list view, detail view, edit view, etc etc...
so each module has its own router,
which stands for its own set of urls:
// user module...
var userRouter = Backbone.Router.extend({
routes: {
"users": "loadUsers",
"users/add": "addUser",
"user/:id": "loadUser",
"user/:id/edit": "editUser"
}
// ... rest dropped to save the trees (you never know if someone prints this out)
});
// book module
var bookRouter = Backbone.Router.extend({
routes: {
"books": "loadBooks",
"books/add": "addBook",
"book/:name": "loadBook",
"book/:name/edit": "editBook"
}
// ... rest dropped to save the trees (you never know if someone prints this out)
});
so, it is not like my two routers are competing for the same route, they each handle their own set of routes.
edit
now that I had more info via Elf Sternberg, I know it isn't possible by default to have multiple routers match on the same route. without a workaround like overriding the backbone history or using namespaces in routes and regexes to match these routes.
more info here: multiple matching routes
thanks Elf Sternberg for the link.

I just wrote a blog post on Module-Specific Subroutes in Backbone, which allow a "subroute" to be defined which pays attention to everything after the prefix for that route.
Check out the blog entry for more explanation: http://www.geekdave.com/?p=13
This means you don't have to redundantly define the same prefix over and over, and you can also lazy-load subroutes as modules are accessed. Feedback is most welcome!

There is a limited but important case when it makes sense to use multiple Routers. If you need to expose only a subset of your application's routes & views based on data collected at runtime (perhaps login credentials - e.g., manager vs. staff can see & navigate between different sets of views) you could instantiate only the appropriate Router & View classes. This is significant because routes can be bookmarked and sent from user to user. Of course, you still need checks on the server to ensure that an unauthorized user isn't issuing requests after navigating to a view they arrived at via a bookmark sent by an authorized user. But it's better to design the application so the unauthorized view is just not generated.