时间戳

首页 > 解决方案 > 反应路由器不渲染组件然后他有参数

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

问题描述

大家好 ！

我的问题是什么？

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

 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>
        </>
    )
}

编辑：

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

标签： javascriptreactjsreact-routerreact-router-domslug

解决方案

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

=>

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

推荐阅读