`onActivate` for nested routes about router5

[troch]

You probably need to flatten your array and extract the segments you need. Can you show me your route definitions?

[secretfader]

const routes = [
  {
    name: 'shop',
    path: '/shop',
    onActivate: (dispatch) => (params) => {
      dispatch(loadProducts(params));
    },
    children: [
      {
        name: 'category',
        path: '/category/:id',
        onActivate: (dispatch) => (params) => {
          dispatch(filterProducts(params.id));
        }
      }
    ]
  },
  {
    name: '404',
    path: '/404'
  },
  {
    name: 'page',
    path: '/*path',
    onActivate: (dispatch) => (params) => {
      dispatch(loadPage(params));
    }
  }
];

[secretfader]

I know that Router5 concats names, and while I can write the concat behavior in my plugin, that seems like it would be hard to keep in sync.

I'd much rather ask R5 for a list of matching routes, given the transition-path.

[troch]

So you want all active segments? all newly activated segments? Keep in mind R5 does not know about your onActivate handlers.

[secretfader]

Right. If a child route is activating, I want to include it. (All active segments, regardless of whether they're nested or not. R5, as I see it, should be responsible for parsing and including child route definitions, not userland code.)

This feature is ideally a userland implementation, but since R5 concats child routes (shop.category), it might make sense to have an API where I could ask the Router instance about matches. So:

let matches = router.match(['shop', 'shop.category']) // args are the output of transitionPath.
matches = [
  {
    // route definitions for all cases where name matches
    name: 'shop.category',
    onActivate: () => {}
  }
];

I would've added the . when defining definitions, but that errored when the router initialized.

Does this make sense? For now, I can hack out a solution, but I think an official API would be handy.

[troch]

Currently r5 stores name and path for each route. It has a registry of canActivate functions separately. onActivate is different, it doesn't belong to the router, as you said it is userland. r5 only cares about making sure a transition can happen, it doesn't care about what needs to happen on a route change.

I have a repo here: https://github.com/router5/helpers where I can add helper functions to manipulate a manifest of nested routes.

Since R5 concats child routes

It doesn't. When you use transitionPath, it resolves full node names: https://github.com/router5/transition-path/blob/master/modules/index.js#L1-L5

I would've added the . when defining definitions, but that errored when the router initialized

That is expected behaviour (from the router perspective). If you add a route like so:

const routes = [
  {
    name: 'shop.category',
    path: '/category/:id',
  }

R5 will look for the 'shop' node and if found it will add 'category'. So if you do:

const routes = [
  {
    name: 'shop',
    path: '/shop',
    children: [
      {
        name: 'shop.category',
        path: '/category/:id',
      }
  ]
}

It will try to find the node 'shop' from the node 'shop' to add 'category', hence the error

[secretfader]

Should I be using the children array when defining routes, or just skip it? If R5's nested states are based on shop.category style notation, it seems clearest to ignore the nested array if possible.

[troch]

It is really up to you. Nested children attributes avoid you to repeat parent segments, which can be a benefit if you nest deeply. It can be a bit less maintainable if you reorganise your routes quite often.

[secretfader]

That makes sense. I think that, for now, I won't nest children — just since it keeps the routes array shallow and simpler to maintain.

Thanks for all of your help!

[troch]

👍

[troch]

I'm closing this for now.

[troch]

@nicholaswyoung version >= 2.0.0 registers canActivate functions for you, and middleware syntax has slightly changed router => (toState, fromState[, done]) => .... With redux, you get your store (router => (store, toState, ...) => ...

[secretfader]

@troch So there is no need for custom Redux middleware? Because if I can retrieve the store in canActivate router middleware, then it might make sense to drop the onActivate handlers.

[troch]

store was always available in canActivate, the novelty is that it is available in middleware functions.

You should not perform data loading in canActivate, because you cannot be sure at that point the transition can happen (a child segment canActivate method could still fail it). So middleware (router5 or redux) executing onActivate handlers is recommended.