Dynamically build routes using react-router

Question

I'm building an application that will call out to an API prior to bootstrapping React. This API will tell me which features I need to load based on the user's subscription.

The API will return an array of objects with the pattern outlined below

links: [
    {
        label: 'Payment Reconciliation',
        component: './components/_paymentReconciliation/paymentReconciliationPage',
        url: '/paymentreconciliation'
    },
    {
        label: 'Device Integration',
        component: './components/_deviceIntegration/deviceIntegrationPage',
        url: '/deviceintegration'
    }
]

It's easy enough to map the links to produce dynamic Routes

export default function Routes() {
    let featureRoutes = config.FEATURES.links.map((menuItem, i) => {
        return (
            <Route path={menuItem.url} component={require(menuItem.component).default} key={i} />
        )
    });
    return (<div>
        <Route exact path="/" component={LandingPage} />
        {featureRoutes}
    </div>
    )
}

This obviously isn't working. I'm struggling figuring out how to not need an import statement for every possible Component that might be loaded. Also should the API be returning the path to the component or just the component name? I've seen examples using something like handler={require(PathToComponent)} That hasn't proven to work either.

Any help here would be appreciated

I thing your featureRoutes will be an array.?

MukulSharma
– MukulSharma

2017-06-13 14:13:24 +00:00
Commented Jun 13, 2017 at 14:13 — MukulSharma
– MukulSharma, Commented Jun 13, 2017 at 14:13

Stephen L · Accepted Answer · 2017-06-13 16:38:58Z

2

Try requiring your path to the components to get a reference to that component.

export default function Routes() {
    let featureRoutes = config.FEATURES.links.map((menuItem, i) => {
        return (
            <Route path={menuItem.url} component={require(menuItem.component).default} key={i} />
        )
    });
    return (<div>
        <Route exact path="/" component={LandingPage} />
        {featureRoutes}
    </div>
    )
}

Depending on how react-router implemented their component function this code might be a little off. You can always render a react component using require with React.createElement(require('./Component').default)

edited Jun 13, 2017 at 16:38

answered Jun 13, 2017 at 16:22

Stephen L

2,35913 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Jon Harding Over a year ago

I've tried this and get a Error: Cannot find module "."

Stephen L Over a year ago

Are you using webpack and if socan you post your config? can you post the generated paths in your link array?

Jon Harding Over a year ago

I'm using create-react-app, so I didn't configure it myself... I'm shifting from Angular/Gulp so all pretty new to me

Stephen L Over a year ago

hmm i just tried tried it on my codebase and it worked. Can you paste a few values of your links array while i check out the create-react-app bundle?

Jon Harding Over a year ago

I edited question to have real examples of links array and what I've tried with your suggestion. routes.js is in root folder, components folder is top level

|

Cory House · Accepted Answer · 2017-06-14 02:32:58Z

1

ES imports must be statically analyzable, so you can't dynamically require them. Instead, you can use a CommonJS style import to dynamically require files:

var myFile = require('myFile');

Combine that with the route-config approach, and you're all set.

You can see an example of this in the documentation module of this Pluralsight course: Creating Reusable React Components

answered Jun 14, 2017 at 2:32

Cory House

15.2k13 gold badges75 silver badges89 bronze badges

Collectives™ on Stack Overflow

Dynamically build routes using react-router

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related