React Router/4/Move Hoc To Global Scope

1.0.1Last update Feb 18, 2025

@Codemod

Codemod verified

Official codemod published by a verified account. Learn more.

React

React-router

migration

Moves HOC calls to the global scope

Example

Before

<Router history={browserHistory}>
    <Switch>
        <Route
            path='/'
            render={(props) => (
                <Route
                    exact
                    path='/a'
                    component={HOC(PageComponent)}
                />
            )}
        />
    </Switch>
</Router>;

After

const HOCPageComponent = HOC(PageComponent);
<Router history={browserHistory}>
    <Switch>
        <Route
            path='/'
            render={(props) => (
                <Route
                    exact
                    path='/a'
                    component={HOCPageComponent}
                />
            )}
        />
    </Switch>
</Router>;

Moves HOC calls to the global scope

Example

Before

<Router history={browserHistory}>
    <Switch>
        <Route
            path='/'
            render={(props) => (
                <Route
                    exact
                    path='/a'
                    component={HOC(PageComponent)}
                />
            )}
        />
    </Switch>
</Router>;

After

const HOCPageComponent = HOC(PageComponent);
<Router history={browserHistory}>
    <Switch>
        <Route
            path='/'
            render={(props) => (
                <Route
                    exact
                    path='/a'
                    component={HOCPageComponent}
                />
            )}
        />
    </Switch>
</Router>;

Build custom codemods

Use AI-powered codemod studio and automate undifferentiated tasks for yourself, colleagues or the community

Get Started Now