javascript - React - 将组件动态加载到页面中

Question

我有一个名为 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>
);

在上面的页面组件中，我想加载 item.js 或任何其他页面，具体取决于在页面组件中作为“id”传递给 URL 参数的内容。

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;

我如何实现这一点？我不知道。

有没有其他方法可以做到这一点？

Answer 1

好的，我按照 Johnny Peter 的回答的变体解决了这个问题。

页面.js

import React, { Component } from 'react'
import Navbar from './Navbar';
import components from './indexPage'


  class Page extends Component {

     render() {
    const { id } = this.props.match.params;
    const PageComponent = components.find(comp => comp.id === id).component;

    return (
      <div>
        <Navbar />
        <PageComponent/>
      </div>
    );
  }
}


export default Page;

indexPage.js

import Item from './pages/Item'
import Meow from './pages/Meow'

const components = [{
    id: 'item',
    component: Item
  },
  {
    id: 'meow',
    component: Meow
  }
]

export default components;