反应路由器不渲染组件然后他有参数

Posted 2023-02-24

【中文标题】反应路由器不渲染组件然后他有参数

【英文标题】：React router dont render component then he have parameter

【发布时间】：2021-01-31 08:47:51

【问题描述】：

大家好！

我的问题是什么？

我正在尝试制作产品详细信息页面，然后我正在使用这个：

 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

但如果我想获取这些页面/details/:slug

我也试过这个：/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>
        </>
    )

编辑：

在我的导航器中会出现蛞蝓。

【参考方案1】：

<Route exact path="/details/:slug" components=() => <Details /> />

=>

<Route exact path="/details/:slug" component=Details/>

【讨论】：

你好，我已经试过了，同样的东西......?

是的，第二只眼睛总是有帮助的 :)