はルータV4

Question

に反応私はreact-router-dom 4.1.1と私のコンポーネントをレンダリングしようとすると、次のエラーを受信し続けるのインストール：

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

ここに私の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

あなただけではなく、NavLinkをインポートするNavLinkとしてBrowserRouterをエイリアシング、いくつかの奇妙な理由で、だ：

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

それを取り除くと名前として直接インポートしなさい：

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

BrowserRouterので1つ期待する反応要素子供ではなくテキストであるため、エラーがスローされます。