Add support for redirect/to property in routes definition for react-router-config

Currently, if you want to use react-router-config and have a route redirect to another route, you need to do something like the following:

import { Redirect } from 'react-router';

import AppComponent from './AppComponent';
import PathAComponent from './PathAComponent';
import PathBComponent from './PathBComponent';

const routes = [
  {
    component: AppComponent,
    routes: [
      {
        path: '/',
        exact: true,
        component: () => <Redirect to="/pathA"/>
      },
      {
        path: '/pathA',
        exact: true,
        component: PathAComponent
      },
      {
        path: '/pathB',
        exact: true,
        component: PathBComponent
      }
    ]
  }
]

This works fine, but it would be nice to have a simplified shorthand for this case, perhaps something that looks like the following:

const routes = [
  {
    component: AppComponent,
    routes: [
      {
        path: '/',
        exact: true,
        redirect: '/pathA'
      },
      {
        path: '/pathA',
        exact: true,
        component: PathAComponent
      },
      {
        path: '/pathB',
        exact: true,
        component: PathBComponent
      }
    ]
  }
]

This should be fairly easy to support by modifying the implementation of the renderRoutes function to look for a redirect property on routes in addition/instead of the component property.

[jharris4]

@gl0gl0 Good question about redirecting with params.

I think it should be as simple as something like this:

{ path: '/:id', exact: true, component: (props) => <Redirect to={"/pathA/" + props.match.params.id } /> }

Give that a try and let me know if it works.

[UlyssesInvictus]

Minor bug that I ran into while trying to implement this: even though you’re using a redirect, you still have to provide exact: true if the route you’re redirecting from matches multiple routes (e.g. for the common case of a home page / redirecting to something like /dashboad).

If you don’t provide the exact param, it still redirects, but seems to get caught up on the previous match so that a “new” match isn’t applied. (And any calls to renderRoutes seem to not execute again.) Hopefully this helps anyone else running into the same thing.

Also: this issue is about a year-and-a-half old now–are there any feature implementations for it yet? Any official word that no one’s planning to implement it.