what is a proper way to make redirect in onEnter or thunk callback?

[Guria]

I want to have some parts of url to be optional with default values set in onEnter callback.
Eg., for route /foo/:bar? I want a link to /foo properly redirected to /foo/first with current entry replaced in history instead of pushing new one.

[hedgepigdaniel]

How's this:

import { redirect } from '@respond-framework/rudy';
const routes = {
  FOO_BAR: {
    path: '/foo/:bar?',
    onEnter: ({ action, dispatch }) => {
      if (!action.params.bar) {
        dispatch(redirect({
          type: 'FOO_BAR',
          params: {
            bar: 'first',
          },
        ));
      }
    },
  }
};

The redirect ensures that the URL is replaced rather than pushed.

It might be a good idea to to it in a callback that runs on the server though (e.g. in beforeEnter, thunk, onComplete), since then it should perform a server side redirect during SSR rather than a client side redirect afterwards

[Guria]

Thanks. Exactly what I was looking for. Should we keep issue open until it is documented or should I close it now?

[Guria]

@hedgepigdaniel do we have beforeEnter hook implemented? I have no ssr, but Ican't see it called at client at all.
Also is there a quick description of use cases for each hook. what is special for thunk comparing to other hooks?

[hedgepigdaniel]

You can see all the callbacks in the code here:

rudy/packages/rudy/src/core/createRouter.js

Lines 39 to 54 in 3c18480

	middlewares: Array<Function> = [
	serverRedirect, // short-circuiting middleware
	anonymousThunk,
	pathlessRoute('thunk'),
	transformAction, // pipeline starts here
	// Hydrate: skip callbacks called on server to produce initialState (beforeEnter, thunk, etc)
	// Server: don't allow client-centric callbacks (onEnter, onLeave, beforeLeave)
	call('beforeLeave', { prev: true }),
	call('beforeEnter', { runOnServer: true }),
	enter,
	changePageTitle({ title: options.title }),
	call('onLeave', { prev: true }),
	call('onEnter', { runOnHydrate: true }),
	call('thunk', { cache: true, runOnServer: true }),
	call('onComplete', { runOnServer: true }),
	],

documentation definitely needed. I think thunk is more for backwards compatibility with RFR. But they vary in terms of:

• whether they happen when entering the or leaving the route (beforeEnter vs beforeLeave)
• whether they happen on the server or client during initial SSR/hydrate (or both, which is what you want for code splitting reducers)
• whether they are cached, i.e. they only run once for each route including params etc (see Clicking on the same route does not re-apply the internal state #1)

You are free to customise them by passing your own middlewares to createRouter.