React.Children.only希望在React Router v4中收到一个React元素子元素

Question

I installed react-router-dom 4.1.1 and keep receiving the following error when trying to render my components:

Uncaught Error: React.Children.only expected to receive a single React element child.

Here's my app.js file:

import React from 'react';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import Nav from './components/Nav/nav';
import Search from './components/Search/search';
import Favorites from './components/Favorites/favorites';

const App = () => (
 <Router>
    <div className="app">
      <Nav />
      <Route exact path="/" component={Search}/>
      <Route path="/favorites" component={Favorites}/>
    </div>
  </Router>
);

export default App;

And here is nav.jsx :

import React from 'react';
import {BrowserRouter as NavLink} from 'react-router-dom';

const Nav = () => (
    <ul className="nav">
        <li><NavLink exact to="/" activeClassname="active">Search</NavLink></li>
        <li><NavLink to="/favorites" activeClassname="active">Favorites</NavLink></li>
    </ul>
);

export default Nav;

When I remove <Nav /> from app.js it renders, but I don't see what's wrong with the nav.jsx file.

Answer 1

You're, for some odd reason, aliasing BrowserRouter as NavLink instead of just importing NavLink :

import { BrowserRouter as NavLink } from 'react-router-dom';

Get rid of that and import directly as a name:

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

Because BrowserRouter expects one React element child, not text, the error is thrown.