UG_ UG_ - 3 months ago 35
React JSX Question

React-Router : Unable to redirect from / to /home

I am using react-router for routing in my application. Here is the router config.

let routes = {
path : "/",
onEnter : ({},replace) => replace('/home'),
childRoutes : [
{
path : "home",
component : App,
indexRoute : {component : Landing},
childRoutes : [ ]
}
]
}


When I try to load application I get
RangeError: Maximum call stack size exceeded
. As per my understanding, this is because of onEnter in "/" which run every time I try to hit anything. Is there a way that it only executes when I hit exact match "/" and not every time ?

Answer

Use indexRoute to redirect to home route (see index redirects last example):

let routes = {
    path : "/",
    indexRoute: { onEnter: (nextState, replace) => replace('/home') },
    childRoutes : [
        {
            path : "home",
            component : App,
            indexRoute : {component : Landing},
            childRoutes : [ ]
        }
    ]
}
Comments