React Router v4 - 錯誤：React.Children.only預計會收到一個React元素子元素

Question

我在一個非常簡單的應用程序中使用react v4。我試圖按照文檔，但當我的應用程序嘗試啓動時，我有一個奇怪的錯誤。

錯誤說：error: React.Children.only expected to receive a single React element child

奇怪的是，我在我的ReactDOM.render功能只有一個組成部分。

下面是我的一些代碼片段：

index.js：

ReactDOM.render(
    <App />, 
    document.getElementById('root') 
); 

app.js（我隱藏所有明顯的組件進口）：

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

class App extends Component { 
    render() { 
    return (
     <Router> 
     <div className="App"> 
      <Route path='/'> 
      <Header/> 
      <div className="search-container"> 
       <SearchBar/> 
       <AddMovieButton/> 
      </div> 
      <SearchResultsList/> 
      </Route> 
      <Route exact path='/new'> 
      <AddMovieForm/> 
      </Route> 
     </div> 
     </Router> 
    ); 
    } 
} 

export default App; 

我不能真的明白爲什麼這不起作用，爲什麼我有這個錯誤。

Answer 1

路線中只能有一個子元素。如果您想要有多個，請按如下方式使用div進行包裝。

<Route path="/"> 
    <div> 
    <Header /> 
    <div className="search-container"> 
     <SearchBar /> 
     <AddMovieButton /> 
    </div> 
    <SearchResultsList /> 
    </div> 
</Route>;