Giters

crisward / riot-routehandler

An angular-ui style minimalist route handler for riot.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Feature request: redirect routes

gawin opened this issue · comments

commented

Chris, as discussed via email I'd like to make a redirect to a sub-route from '/user' to '/user/details' while keeping the user.tag view mounted. In my example the user.tag includes a menu with links to the details and messages tag.

routes = [
    {route:"/user/",tag:"user",routes:[
        {route:"details/",tag:"details"},
        {route:"messages/",tag:"messages"},
    ]}
];

Now, this redirect could be done in the user.tag file like this:

<user>
  <a href="/user/details/">Cards</a>
  <a href="/user/messages/">Projects</a>

  <routehandler></routehandler>

  <script>
    this.on('mount', function(){
      page.redirect('/user/details');
    });
  </script>
</user>

However, I'd rather define the redirect in the routes array instead of in the user.tag script. Defining it in the routes array keeps all routes in one places, which make the routes easier to read and maintain.

Please let me know what you think.

commented

Have you tried a wildcard?

routes = [
    {route:"/user/",tag:"user",routes:[
        {route:"details/",tag:"details"},
        {route:"messages/",tag:"messages"},
        {route:"*",tag:"details"}
    ]}
];

If that doesn't work, I'd probably copy react router. They have a 'default' route option, which allows a subrouter to be assigned a default tag when the parent route is matched. I think it could be a good idea to do the same thing.

This wouldn't change path, but would show the desired tag.
ie.

routes = [
    {route:"/user/",tag:"user",routes:[
        {default:'details'},
        {route:"details/",tag:"details"},
        {route:"messages/",tag:"messages"},
    ]}
];
commented

Unfortunately the wildcard example doesn't work here. Wildcards only seem to work on the root level, not on the children of root routes.

Fails:

routes = [
    {route:"/user/",tag:"user",routes:[
        {route:"*",tag:"details"}
    ]}
];

Which made me think, what about using only a '/' route on a child node, that should have the same effect as the default: route option, but less greedy than using the wildcard '*':

routes = [
    {route:"/user/",tag:"user",routes:[
        {route:"/",tag:"details"}
    ]}
];

But that also doesn't seem to work.

It would be really awesome if you could release a new version of riot-routehandler with support for the use of wildcards '*' and root routes'/' on child nodes, which probably makes more sense than implementing the default: key.

commented

Ok, very busy right now, but I should be able to get to it over the next week...
Thanks for the feedback, also thinking about doing something for 404's.

commented

Well, since we already can define a wildcard on the root route, catching 404's already works as expected:

routes = [
    {route:"/user/",tag:"user",routes:[
        {route:"/details",tag:"details"}
    ]},
    {route:"*", tag:"not-found"}
];

Really looking forward to the next release with support for wildcards '*' and root routes '/' on child nodes! Let me know if I can help out with testing stuff.

commented

I've added a default sub-route, using the / as suggested. It's passing the unit test, but I've not tried it in the browser. If you pull the github repo and try it from there. Let me know how you get on. If it works ok I'll push the update to npm.

Thanks!

Actually, hold off on that, the travis tests are failing, seems to be a browser reload causing the issue. Needs a bit more work

commented

Ok, I've done some manual testing and it seems to work. The default route has to be the top most route at the moment. The CI tests are failing on travis, but I'm not sure why as all the unit tests pass locally. I'll get the tests passing and allow the default route to be put anywhere.

commented

Tests passing again, I'd changed to node v4 and something in my testing toolchain didn't like it. I've rolled back to node v0.12. and they're all passing again. Tested default routes for second and third level routes, it's recursive so should work all the way down.

commented

Can confirm that adding the '/' default route for children now works as expected, thx @crisward, awesome work!

ps. Thank you for also updating the readme for future users :-)