[英]Using the same component for different Routes with React Router
我有一个PageBuilder
组件,它根据配置文件动态构建编辑/列表页面。 我想要使用相同PageBuilder
组件的动态路由(如“/collection/list”、“/collection/edit/123123”、“/dashboard”等)。
我无法让它工作 - 例如,如果我在“/collection/list”中,当单击指向“/collection/edit/1231”的链接不起作用时。 只有对该 URL 的刷新才有效(反之亦然)。
我试着把我的初始化代码PageBuilder
的componentWilLReceiveProps
但它似乎每秒调用一次。
我的路线如下所示:
<Route path="/" component={App}>
<IndexRedirect to="/dashboard" />
<Route path="/:page/:collection/:action(/:entity_id)" component={PageBuilder} />
<Route path="/:page" component={PageBuilder} />
</Route>
还有我的 PageBuilder:
constructor(props) {
super(props);
this.createSectionsHTML = this.createSectionsHTML.bind(this);
this.onChange = this.onChange.bind(this);
this.onSave = this.onSave.bind(this);
}
getPageName() {
return this.props.params.page.replace(/-/g, '_').toLowerCase();
}
componentWillReceiveProps(props) {
this.action = this.props.params.action;
}
componentWillMount() {
let pageName = this.getPageName();
this.props.dispatch(setInitialItem(pageName));
}
componentDidMount() {
let pageName = this.getPageName();
let { collection, entity_id } = this.props.params;
if (collection && entity_id) {
let { dispatch } = this.props;
dispatch(getCollectionEntity(collection, entity_id, pageName));
}
}
关于每次重定向到不同路线时如何重新呈现页面的任何想法?
如果我可以在重定向时卸载并重新安装组件,那就太好了,但我不确定如何告诉 React Router 这样做......
谢谢!
使this.state
可以控制组件的渲染方式。
现在,在componentWillReceiveProps
,检查nextProps
参数
componentWillReceiveProps(nextProps, nextState) {
if( <check in nextProps if my route has changed> ) {
let newState = Object.assign({}, this.state);
// make necessary changes to the nextState Object by calling
// functions which would change the rendering of the current page
this.setState({ nextState });
}
}
这将使componentWillReceiveProps
仅在路由更改时采取行动。
现在在你的渲染函数中,
render() {
const { necessary, variables, to, render } = this.state;
let renderVariables = this.utilityFunctionsReqToRender(someArgs);
return (
<toRenderJsx>
...
</toRenderJsx>
)
}
这将使您的组件在路由更改时“刷新”。
componentWillReceiveProps 自 React 16.3.0 起已弃用(如浏览器控制台中的警告所示)
参考: https : //reactjs.org/docs/react-component.html#componentdidupdate
因此componentDidUpdate可用于获取新状态并根据参数重新加载数据
componentDidUpdate(prevProps, prevState, snapshot) {
console.log("componentDidUpdate " +prevState.id);
reloadData(prevState.id);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.