警告：道具类型失败：道具“链接”在“链接”中标记为必需，但其值为“未定义”

Question

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Jumbotron, Grid, Row, Col, Image, Button } from 'react-bootstrap';
import './Home.css';

export default class Home extends Component{
render() {
    return (
        <Grid>
            <Jumbotron>
                <h2>Welcome to Judic-O Couture.io</h2>
                <p>Understang the basics of react, react-bootstrap & react-router-dom.</p>
            </Jumbotron>
            <Link>
                <Button bsStyle="primary">About</Button>
            </Link>
        </Grid>
    );
  };
};

无法真正看到我的错误，但我知道其中存在错误。我去了链接标签，因为那是在react-router-dom

中指出的错误所在

Answer 1

在Link中，您必须添加“至”，如果您并未真正将路由器用于任何您不应该使用Link的事情，但是如果出于某种原因，您需要这样做，

<Link to="/#"><Button bsStyle="primary">About</Button></Link>

同样，如果您确实在将它用于路由器，则应使用

Answer 2

        <Link>
            <Button bsStyle="primary">About</Button>
        </Link>

在链接中，您需要添加to

        <Link to="/about">
            <Button bsStyle="primary">About</Button>
        </Link>

Answer 3

阅读react-router的文档。

to组件是Link组件所必需的。

Answer 4

我在使用 <Link to={this.props.link}>

时遇到了这个问题

因为 props.link 在用户输入之前被设置为 undefined 。
一个快速的技巧是将其更改为 <Link to={this.props.link || '/'}> 您可以简单地将 / 替换为 /# 或任何其他默认路由（路径）。