Avertissement : Échec du type de propriété : La propriété `to` est marquée comme obligatoire dans `Link`, mais sa valeur est `undefined`

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

Je ne vois pas vraiment mon erreur mais je sais qu'il y a un bug. Je suis allé à la balise link parce que c'est là que l'erreur a pointé dans le react-router-dom.

Answer 1

Dans Link, vous devez ajouter "to", si vous n'utilisez pas vraiment le routeur pour quoi que ce soit, vous ne devriez pas utiliser Link, mais si, pour une raison quelconque, vous en avez besoin, procédez comme suit

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

Encore une fois, si vous l'utilisez vraiment pour le routeur, vous devriez utiliser

Answer 2

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

ici dans Link vous devez ajouter to

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

Answer 3

Lire la documentation de react-router.

https://reacttraining.com/react-router/web/api/Link

En to est nécessaire pour un Link de la composante.

Answer 4

J'ai rencontré ce problème lorsque j'utilisais <Link to={this.props.link}>

parce que props.link a été défini comme indéfini avant l'entrée de l'utilisateur.
Une solution rapide a consisté à le remplacer par <Link to={this.props.link || '/'}> vous pouvez simplement remplacer le / avec /# ou toute autre route par défaut (path) .