Question

我试图将组件可访问的属性值传递给我的React Router链接，但是我没有看到与该链接相关的属性的params键中填充了任何值。我在<Link>或<Route>部分做错什么吗？我没有看到任何错误提示我的设置错误

这是我的代码：

import React from 'react';
import ReactMarkdown from 'react-markdown';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import AnnotationCard from './AnnotationCard';

//Annotation Card - Body
export default class AnnotationBody extends React.Component {
    render() {

        const type = this.props.type.toLowerCase();

        return (
            <Router>
            <div>
                <div className="row d-flex p-1">
                    <div className="col-md-12">
                        <h3> <Link to="annotations" params={{ annotationId: this.props.linkId }} className={"text-" + type}>{this.props.title}</Link></h3>
                    </div>
                </div>
            </div>
            <Route name="annotations" path='/app/annotation/:annotationId' component={AnnotationCard} />
            </Router>
        )
    }
}

Answer 1

您的路线是

<Route name="annotations" path='/app/annotation/:annotationId' component={AnnotationCard} />

与此路线相关联的链接是

<Link to="annotations" params={{ annotationId: this.props.linkId }} className={"text-" + type}>{this.props.title}</Link>

您的link在您定义path='/app/annotation/:annotationId'的途中不起作用，在链接中您仅使用to="annotations"，因此您的链接将以base_url/annotations结尾在您的浏览器中，并且可能 404 - page not found error ，因为您没有路由。

根据docs，

如果要将参数传递给链接，则应该这样做，

<Link to={`/app/annotation/${this.props.linkId}`} className={"text-" + type}>{this.props.title}</Link>  //considering associate route for this link is with `path='/app/annotation/:annotationId'`

注意：在此处传递时，您无法将name传递给Route，

<Route name="annotations" path='/app/annotation/:annotationId' component={AnnotationCard} />

根据docs，

Route仅包含以下内容。

组件
渲染：功能
孩子：func
路径：字符串|字符串[]
确切：bool
strict：bool
位置：对象
敏感：bool

React Router Props参数未显示

1 个答案: