反应路由器不渲染组件然后他有参数
React router dont render component then he have parameter
大家好!
What is my problem ?
我正在尝试制作产品详细信息页面,然后我正在使用它:
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>
);
This working really well /market/search/:categorie
But if I'm trying to get this pages /details/:slug
I have also try this: /market/details/:slug
如果我获得产品详细信息路由但出现 header 但我要呈现的组件 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>
</>
)
}
编辑:
在我的导航器中出现了 slug。
<Route exact path="/details/:slug" components={() => <Details />} />
=>
<Route exact path="/details/:slug" component={Details}/>
大家好!
What is my problem ?
我正在尝试制作产品详细信息页面,然后我正在使用它:
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>
);
This working really well
/market/search/:categorie
But if I'm trying to get this pages
/details/:slug
I have also try this:
/market/details/:slug
如果我获得产品详细信息路由但出现 header 但我要呈现的组件 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>
</>
)
}
编辑:
在我的导航器中出现了 slug。
<Route exact path="/details/:slug" components={() => <Details />} />
=>
<Route exact path="/details/:slug" component={Details}/>