时间戳

首页 > 解决方案 > 反应路由器道具参数未出现

reactjs - 反应路由器道具参数未出现

问题描述

我正在尝试将组件可访问的道具值传递给我的反应路由器链接，但我没有看到params与链接关联的道具的键中填充了任何值。<Link>我在or<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>
        )
    }
}

标签： reactjsreact-router

解决方案

你的路线是，

<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因为您没有此路线。

根据文档，

如果你想将参数传递给你的链接，你应该这样做，

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

根据文档，

Route只有以下。

  1. 零件
  2. 渲染：函数
  3. 孩子们：功能
  4. 路径：字符串 | 细绳[]
  5. 准确：布尔
  6. 严格：布尔
  7. 地点：对象
  8. 敏感：布尔

推荐阅读