javascript - ReactJs:如何从路由器路径链接获取正确的变量？

Question

<Link to="/category/{card.title}">View List</Link>

在上面，我将路由从主页切换到类别页面，并尝试将 card.title 的值传递到类别组件。

网址标题:

---

然后在我的类别组件中:

constructor(props) {
    super(props);
    this.state = {
        title: props.title
    };

    console.log('props', props);
    console.log('props.location', props.location);
}

componentDidMount() {
    // console.log('Category componentDidMount this.state', this.state);
    console.log('%c Category componentDidMount this.state', 'background: #222; color: #bada55', this.state);
}

Prop :

Answer 1

card.title 是一个值，因此您需要像这样传递它:

<Link to={`/category/${card.title}`}>View List</Link>

或者像这样使用+:

<Link to={"/category/" + card.title}>View List</Link>

如果使用""，则整个部分将变成字符串，动态值将不会被替换。

检查mozilla doc有关模板文字的更多详细信息。

建议:

我建议您定义一个带有路由类别的参数，该参数的值为card.title，然后在类别组件内您可以通过this.props.params访问它。参数名称.