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

Question

我安装了react-router-dom4.1.1并在尝试渲染我的组件时继续收到以下错误:

未捕获错误:React.Children.only预计会收到一个React元素子级.

这是我的app.js档案:

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;

这是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;

当我<Nav />从中删除app.js渲染,但我没有看到该nav.jsx文件有什么问题.

Answer 1

出于某些奇怪的原因,你出现了别名BrowserRouter,NavLink而不仅仅是导入NavLink:

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

摆脱它并直接导入为名称:

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

因为BrowserRouter期望一个React元素子而不是文本,所以抛出错误.