React - Dynamically load a component into the page

Question

I have a static component called Item.js

Routes.js

export default () => (
  <Provider store={store}>
    <BrowserRouter>
      <Switch>
        <Route path="/posts" component={Posts} />
        <Route path="/form" component={Postform} />
        <Route exact path="/" component={App} />
        <Route path="/items" component={Items} />
        <Route path="/cart" component={Cart} />
        <Route path="/page/:id" component={Page} />
      </Switch>
    </BrowserRouter>
  </Provider>
);

In the above page component, I want to load item.js or any other page depending on whats passed to the URL params in as "id" in the page component.

import React, { Component } from 'react';
import Navbar from './Navbar';
import Item from './pages/Item';

class Page extends Component {
  componentDidMount() {
    const { id } = this.props.match.params;
    console.log(id);
  }

  render() {
    return (
      <div>
        <Navbar />
        <div>Hello</div>
      </div>
    );
  }
}

export default Page;

How do I achieve this? I don't know.

Are there any alternative ways of doing it?

Answer 1

Something like this should work

import React from 'react';
import Navbar from './Navbar';
import Item from './pages/Item';

const components = [{
  id: 'your/id/passed/in/param'
  component: Item
}]

class Page extends React.Component {

  state = {
    Component: null,
  }

  componentDidMount() {
    const { id } = this.props.match.params;
    this.setState({ Component: components.find(comp => comp.id === id).component })
  }

  render() {
    const { Component } = this.state;
    return (
      <div>
        <Navbar />
        <Component /> 
      </div>
    );
  }
}

export default Page;