0

In my simple app,one of my component need the Link component of react-router,like this:

<ul>
   <li><Link to="/">javascript</Link></li>
   <li><Link to="/">python</Link></li>
   <li><Link to="/">java</Link></li>
</ul>

when i import Link in this way:

import { BrowserRouter as  Link} from 'react-router-dom'

i got a error:

React.Children.only expected to receive a single React element child

and if i import Link like this :

import { BrowserRouter as Router, Route, Link} from 'react-router-dom'

or this

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

that will get nothing errors,anyone can tell me what different in above three ways of import Link component. my react-router-dom version is 4.3.1

TinLen
  • 3
  • 2
  • 2
    In the first one your're not importing Link. You're just importing BrowserRouter and renaming it to Link – weibenfalk Nov 28 '18 at 13:31
  • Take a look at this post: https://stackoverflow.com/questions/31386631/difference-between-import-x-and-import-as-x-in-node-js-es6-babel – Craws Nov 28 '18 at 13:32

1 Answers1

1

The proper way to import the Link component is:

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

The way you do it: import { BrowserRouter as Link} is not the correct way, since you are just importing the BrowserRouter component and renaming it to "Link".

Stundji
  • 855
  • 7
  • 17
  • i got your mind ,thx! and one more question,why `import { BrowserRouter as Router, Route, Link} from 'react-router-dom' `is work? – TinLen Nov 28 '18 at 13:46
  • 1
    @TinLen Because of the `,` between `BrowserRouter as Router` and `Route`. In a sentence that statement imports the `BrowserRouter` named as `Router` and the `Route` and the `Link` which are not renamed. You could also split that into: `import { BrowserRouter as Router} from 'react-router-dom'`, `import { Route, Link} from 'react-router-dom'`. – trixn Nov 28 '18 at 13:49