How to conditionally import file in Reactjs-CodePudding

I have have a large application that monitors a file called routes.js . I can not change the file name or mess with routes.js at all. I need to load another file based on a useState variable from another component when a condition is met. This following code will need to be put in Apps.js example:

if (!change) {
import routes from "routes";
} else {
import routes from "newroutes"
}

Is this possible?

CodePudding user response：

You can just alias the imports.

import routes_1 from "routes";
import routes_2 from "newroutes"

Then, you can just declare a variable: routes and assign the appropriate value to it.

routes = !change ? routes_1 : routes_2;

CodePudding user response：

It's possible to do using Webpack lazy loading (if you build your app using Webpack):

import(/* webpackChunkName: "routes" */ './routes').then(module => {
     const routes = module.default;
});

But probably you will need to adjust your build config. Also this import is returning a promise, so you should write your code in the callback.

Update: but in your case it seems you don't need it. You could do something like this:

import file1 from 'routes'
import file2 from 'newroutes'

let routes = file1
if (change) {
  routes = file2
}

So you will have your routes variable unchanged