Question

我有一个这样的路由配置： /${URL.PRODUCT}/:category/:brand/:flavour/和exact={true}，它会加载“产品”组件。

在“产品”组件上，我有这个：

    constructor(props) {
    super(props)
    this.state = {
        selectedCategory: props.match.params.category || '',
        selectedFlavour: props.match.params.flavour || '',
        selectedBrand: props.match.params.brand || '',
    }
    s("PARAMS", JSON.stringify(props.match.params)); //console on server
    c("PARAMS", JSON.stringify(props.match.params)); // console on browser
}

现在，在其他组件上，我有一个click事件，它可以执行以下操作：

clickHandler = (cardData) => {
        let path = `/${URL.PRODUCT}/${cardData.selectedCategory}/${cardData.selectedCard}/${cardData.slug}`;
        cardData.type === CONTENT_TYPE.FLAVOUR && !!cardData.slug && this.props.history.push(path);
    }

cardData看起来像这样：

{
    id: 3
    image: "/some/imagepath/"
    name: "Diet Coke"
    selectedCard: "cocacola"
    selectedCategory: "softdrinnk"
    slug: "dietcoke"
    type: "flavour"
}

其结果如下：/product/softdrinnk/cocacola/dietcoke

现在是问题：当我击打this.props.history.push()时，它也使用错误的URL进行服务器调用（不应这样做）：/product/softdrinnk/cocacola/undefined

这是我的控制台在客户端上的外观：

PARAMS {"category":"softdrinnk","brand":"cocacola","flavour":"dietcoke"}

这是我在服务器上收到的：

PARAMS {"category":"softdrinnk","brand":"cocacola","flavour":"undefined"}

我整天都在弄清楚为什么会发生这种行为。

更新：

即使我对URL /${URL.PRODUCT}/${cardData.selectedCategory}/${cardData.selectedCard}/dietcoke进行了硬编码，它也会忽略最后一个参数并仍然将undefined传递给服务器

当我点击浏览器刷新时，它可以正常工作并加载所有数据

React Router V4参数未定义

0 个答案: