问题描述
大家好!
我怎么了?
return (
<Router>
<div>
<Header user={this.state.user} setUser={this.setUser} />
</div>
<div className="mx-10">
<Switch>
<Route exact path="/details/:slug" components={() => <Details />} />
<Route exact path="/market/search/:categorie" component={DynamicSearchCategory} />
</Switch>
</div>
</Router>
);
这真的很好
/market/search/:categorie
我也尝试过以下方法:
/market/details/:slug
如果我获得产品详细信息路线,则什么也不会显示,但是出现标题,但是我要渲染的组件functional components
或class components
则什么也不会显示
如果我这样做:
console.log(props)
// or
console.log(this.props) // for class components
我不知道我是否有任何遗漏,我也不明白为什么/market/search/:categorie
工作得很好,但是/details/:slug
却不行
有一部分我会向他们提供道具:
class components
import React from 'react'
export default class Details extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
console.log(this.props)
}
render() {
return (
<p>Details</p>
)
}
}
或在功能组件中:
import React from 'react'
export default function ProductDetails(props) {
console.log(props.match.params.slug)
return (
<>
<p>Product Details</p>
</>
)
}
编辑:
在我的导航器中出现了sl。
解决方法
<Route exact path="/details/:slug" components={() => <Details />} />
=>
<Route exact path="/details/:slug" component={Details}/>