React Router v4 - Error: React.Children.only expected to receive a single React element child

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

一个路由中只能有一个子元素。如果你想有多个，用 div 包裹它们，如下所示。

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

React Router v4 - Error: React.Children.only expected to receive a single React element child

React Router v4 - Error: React.Children.only expected to receive a single React element child

reactjs

react-router-v4