我有这些路线
<Route exact path={`/admin/caters/:id`} component={Cater} />
<Route exact path={'/admin/caters/create'} component={CreateCater} />
当我导航到第一条路线时,我得到了一个具有给定 ID 的餐饮服务商。 Cater 组件被渲染
当我导航到第二条路线时,CreateCater 组件将呈现在页面上,但我注意到 Cater 组件中使用的一些 redux 操作正在运行。所以这两个组件都以某种方式被渲染 - 但我不明白为什么。
以下是组件:
Cater:
class Cater extends Component {
async componentDidMount() {
console.log('Cater component did mount')
const { match: { params: { id }}} = this.props
this.props.get(id)
}
render() {
const { cater } = this.props
if(!cater) {
return null
}
else {
return (
<div>
... component data ...
</div>
)
}
}
}
const mapStateToProps = (state, props) => {
const { match: { params: { id }}} = props
return {
cater: caterSelectors.get(state, id)
}
}
const mapDispatchToProps = (dispatch, props) => {
return {
get: (id) => dispatch(caterActions.get(id))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Cater)
创建餐饮者:
export default class CreateCaterPage extends Component {
render() {
return (
<React.Fragment>
<Breadcrumbs />
<CaterForm />
</React.Fragment>
)
}
}
当我转到 /admin/caters/create' 时,我可以在 Cater 组件内的 componentDidMount() 生命周期方法中看到 console.log。
我不知道我做错了什么:(
/create
火柴/:id
,所以这条路线匹配是有道理的。我建议强制:id
仅查找数字:
<Route exact path={`/admin/caters/:id(\\d+)`} component={Cater} />
<Route exact path={'/admin/caters/create'} component={CreateCater} />
同样,您可以按照 @jabsatz 的建议,使用开关,并让它匹配第一个匹配的路由。在这种情况下,您需要确保/admin/caters/create
路线是第一个<Route />
元素匹配。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)