React Router v4 - エラー：React.Children.onlyが1つのReact要素の子を受け取ると予想されます。

Question

私は非常に単純なアプリケーションでreact router 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

ルート内には1つの子要素しか配置できません。複数の場合は、次のようにdivでラップしてください。

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