Router link giving warning " link is a void element tag and must not have `children` or use `props.dangerouslySetInnerHTML`."

Question

I am using react-route first time. when i am trying this, it gives me this warning and its not working "Warning: link is a void element tag and must not have children or use props.dangerouslySetInnerHTML. Check the render method of Loginpanel."

my code is like this.

render() {

    return (

        <div >

            <input type="email" />
            <input type="password"/><br/>

         <link to="Index">   BLOCK
         </link>

        </div>

       )
    }
  }

and my main main.js is like this

    render(
  <Router history={hashHistory}>

      <Route path="/" component={Loginpanel} >
    <Route path="Index" component={App}/>
      <Route path="Form" component={Form} />
          </Route>


    </Router>,
   document.getElementById('js-main'));

Thanks in advance.

Answer 1

In reactjs its Link and not link. Can you try that once?

      import{Link} from "react-router-dom"

Answer 2

Change the link to Link

The first letter is Capitalized.

Answer 3

In complement of Harkirat Saluja answer:

render method example:

render() {

    return (

        <div>
          <Link to="Index">It Link, not link </Link>
       </div>
    )
}

Answer 4

If you are using react-router version 4 then this is the right way to import Link

import { Link } from 'react-router-dom';

because the React Router project has now been broken up into a couple of different libraries