我有一个名为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 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;
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句