React-router: Defining redirects in plain JS (no JSX)

[zettadam]

Hi, I was wondering if there was a way to define a map of redirects in plain JS route configuration. Related documentation is written in JSX. Would it be possible to add an equivalent route configuration for those cases when plain JS might be used, or is this the only way?

I'm guessing (without looking at the source code) something like the following might make it clearer:

const routes = {
    ...
    redirects: {
        '/path/to': '/newpath/to/'
    }
}

[taion]

It's not too onerous to define a redirect with the non-JSX syntax, though. You just do something like:

{path: "foo", onEnter: (_, replaceState) => replaceState(null, "/bar")}

If that pattern is useful for you, I feel like you could always insert these routes yourself at the beginning of the route list.

I think by design, the non-JSX API is a little bit lower-level than the JSX API, so it'd be a little strange to offer a special redirect param or something rather than just giving you onEnter to do with as you'd like.

Any thoughts elsewhere? I'm assuming at least that the existence of Redirect as a purely JSX component is intentional.

[darcyadams]

FYI, you can still use the router components w/out jsx:

var Redirect = React.createFactory(Router.Redirect);

// within your router config tree somewhere...
Redirect({
  from: '/somePath'
  to: 'someOtherPath'
})

[Danita]

Does this work on the / route? All I get is infinite redirects.

[{
    component: 'div',
    childRoutes: [
        {
            path: '/',
            component: require('components/App'),
            childRoutes: [
                require('./Dashboard'),
                require('./Reports')
            ],
            onEnter: (_, replaceState) => replaceState(null, "/dashboard")
        },
        {
            path: "*",
            component: require('components/NoMatch')
        },
    ],

}]

[nathanielks]

@taion I tried that initially, however a problem that introduces is with nested routes. Let's take this for example:

export default {
  path: 'projects',
  onEnter (next, replace) {
    console.log('1st level deep!')
    if (next.routes.length <= 2) {
      replace('/foo')
    }
  },
  childRoutes: [
    {
      path: ':project',
      onEnter (_, replace) {
        console.log('2nd level deep!')
      },
      component: ProjectComponent
    }
  ]
}

Let's say we navigate to /projects. Great, it gets redirected to /foo! What happens though if we navigate to /projects/some-project-name and then /projects? Because onEnter has already been triggered, our redirect won't happen.

That said, unless I'm incorrect, having Redirect be something that can be used alongside PlainRoute would be super ideal! Perhaps a type property can be added and then can be used to determine what _kind_ of route to generate?

[taion]

We have a list of resources in multiple places for usage questions. The issue tracker is not one of them. Please stop asking – you're not going to get an answer here.

[nathanielks]

Sorry if i came off as asking a usage question, @taion. You provided a workaround to solve a problem that exists due to lack of feature parity between the jsx and non-jsx synax. My intent is to inform you of said discrepancy and provide a suggestion as to how to alleviate the problem.

[taion]

You are misinterpreting my answer here. The syntaxes are equivalent, but this is not the place to get clarification.

[nathanielks]

@taion It's hard to say it's equivalent when I have to re-implement functionality present in one but not the other?

[nathanielks]

I totally get this is FOSS, "PR's accepted," and am _super_ grateful you all have put so much time and effort into this. I believe I'm following the contributing guidelines by saying I think I both found a bug/am proposing a new or changed API. If this is incorrect, I'll drop the issue and go about my business.

[timdorr]

@nathanielks Commenting on an issue closed 5 months ago isn't really going to be helpful. You're limited to the 4 other participants on this issue in terms of eyeball count. Asking on SO or Reactiflux is going to net you a lot more attention. I would try those routes to see if your issue is solvable on your end and _then_ consider a bug report here after you've exhausted the other options.

[taion]

I am saying that you are misunderstanding the API, and should use a support forum like Stack Overflow or Reactiflux if you need clarification.

[nathanielks]

:+1:

[hmedney]

In case it helps the next person google sends here attempting to implement a redirect using plain routes, I was able to avoid the infinite redirects in react-router 3.0.0 by placing the onEnter impl inside an indexRoute vs on the route itself.

route.indexRoute = {
  onEnter: (nextState, replace) => replace('/new-path')
}

Found this by inspecting the routes created using JSX and <IndexRedirect to='/new-path'>