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

道具：

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.ParamName访问该参数。