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

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

import React，{Component}来自'React'；
从“/Navbar”导入导航栏；
从“./pages/Item”导入项目；
类页面扩展组件{
componentDidMount（）{
const{id}=this.props.match.params；
console.log（id）；
}
render（）{
返回(
你好
);
}
}
导出默认页面；

我如何做到这一点？我不知道

---

有没有其他的方法呢

您可以创建如下索引文件：

index.js：

import Item from './item';

const pages = {
  pageId: Item,
};

export default pages;

和在页面组件中：

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

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

  render() {
    const { id } = this.props.match.params;
    if (pages[id]) {
      return pages[id];
    }
    return (
      <div>
        <Navbar />
        <div>Hello</div>
      </div>
    );
  }
}
export default Page;

import React，{Component}来自'React'；
从“/Navbar”导入导航栏；
从“./pages/Item”导入项目；
从“./pages”导入页面；
类页面扩展组件{
componentDidMount（）{
const{id}=this.props.match.params；
console.log（id）；
}
render（）{
const{id}=this.props.match.params；
如果（第[id]页）{
返回页面[id]；
}
返回(
你好
);
}
}
导出默认页面；

---

为了基于id动态加载组件。

类似的方法应该可以工作

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;

从“React”导入React；
从“/Navbar”导入导航栏；
从“./pages/Item”导入项目；
常数分量=[{
id:'your/id/passed/in/param'
组成部分：项目
}]
类页扩展了React.Component{
状态={
组件：null，
}
componentDidMount（）{
const{id}=this.props.match.params；
this.setState（{Component:components.find（comp=>comp.id==id）.Component}）
}
render（）{
const{Component}=this.state；
返回(
);
}
}
导出默认页面；

好的，我根据约翰尼·彼得的答案的变化来解决这个问题

Page.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;

---

@Piyush Zalani您的示例不起作用，其中有两个语法错误。在提交答案之前，您应该测试并运行示例代码。什么是“your/id/passed/in/param”？我应该在那里传递this.props.match.params吗？这是与组件对应的：id。

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

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

export default components;