React - Dynamically Import Components

Question

I have a page which renders different components based on user input. At the moment, I have hard coded the imports for each component as shown below:

    imp         


        

Answer 1

You can use Route and Switch from 'react-router-dom' to dynamically render components based on the path. Here is the sample

render() {
return (
  <>
    <Header  />
    <BrowserRouter>
      <Switch>
        <Route path="/abc" exact render={() => (<Abc />)}/>
        <Route path="/abcd" exact render={() => (<Abcd {...this.props} />)}/>
        <Route path="/xyz" exact render={() => (<Xyz />)}/>
        
      </Switch>
    </BrowserRouter>
    <Footer /></>
);  }

Answer 2

Since the question is really old, the answers maybe were ok. But nowadays, if someone have the same problem should use dynamic import, in order to load only the component needed and avoid to load all the different ones.

const component = React.lazy(() => import('./component.jsx'));

try the example here: demo