Warning: Failed prop type: The prop `to` is marked as required in `Link`, but its value is `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>
    );
  };
};

Cant really see my error but I know there is a bug in it. I've gone to the link tag because thats where the error pointed to in the react-router-dom

Answer 1

In Link you have to add "to", if you are not really using the router for anything you shouldn't use Link, but if for some reason you need it, then do it like this

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

Again, if you are really using this to the router About you should use <Link to="/your-path" or whatever the route you want to using.

Update: I still don't understand why you have <button> inside your link. If for some reason you need a function, you can add onClik to the Link, and if it's for design purpose, you can add className='my-class'

Answer 2

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

here in Link you need to add to

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

Answer 3

Read the documentation of react-router.

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

The to prop is required for a Link component.

Answer 4

I faced this issue when I was using <Link to={this.props.link}>

because props.link was set as undefined before user input .
A quick hack was changing it to <Link to={this.props.link || '/'}> you can simply replace the / with /# or any other default route(path) .