react-router-dom Switch 需要额外的 div 包装器

Question

我正在使用react，react-router-dom和redux来创建一个简单的反应应用程序。package.json文件包含：

...
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
...

项目结构如下：

- src
- components
- Container
. index.js
+ Customers
+ Greetings
. App.js
- reducers
. customer.js
. index.js
. reducers.js
. Root.js

这是index.js文件的样子：

import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import Root from './Root'
import rootReducer from './reducers'
import registerServiceWorker from './registerServiceWorker'
const store = createStore(
rootReducer
)
render(<Root store={ store } />, document.getElementById('root'))
registerServiceWorker()

这也是我的Root.js文件的样子：

import React from 'react'
import PropTypes from 'prop-types'
import { Provider } from 'react-redux'
import { BrowserRouter as Router } from 'react-router-dom';
// Import app component
import App from './components/App'
const Root = ({ store }) => (
<Provider store={ store }>
<Router>
<App />
</Router>
</Provider>
)
Root.propTypes = {
store: PropTypes.object.isRequired
}
export default Root;

以下是我的App组件：

import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom'
// import pages 
import Container from './Container';
import Greetings from './Greetings';
import Customers from './Customers';

class App extends Component {
render() {
return (
<Switch>
<div> // <~~ This is where the issue happens
<Route path="/" component={ Container }></Route>
<Route exact path="/" component={ Greetings }></Route>
<Route path="/customers" component={ Customers }></Route>
</div>
</Switch>
);
}
}
export default App;

问题是当我使用<Switch />作为<Route />标签的包装器时，它需要一个内部<div />元素，否则它将不起作用。 这意味着如果我删除<Switch />内的<div />元素并直接通过<Switch />包装<Route />，页面将不会呈现，并且控制台中也不会引发错误或异常。

问题出在哪里？我在某处做错了吗？ 任何帮助，不胜感激。

编辑：

感谢大家的有用评论。以下是需要考虑的一些重要事项：

1. 我没有收到任何错误或警告，反应脚本工作正常并完全编译我的代码。

2. 如您所提到的，只会呈现特定路径的第一个<Route>元素，但是当我将<div>元素添加为<Switch>元素的第一级作为所有<Route>的包装器时，它将正常工作。但问题是我不需要渲染额外的<div>元素。请考虑我希望容器组件在所有页面中呈现，而同一路径("/"(中的其他组件应呈现为容器的子级。

Answer 1

有两种解决方案：

1. Raghav在评论中提到的解决方案： 这可以通过将第一个<Route />(我需要在所有页面中呈现(作为容器组件来完成，并将其用作<Switch >标记内其他<Route />的包装器。 来自@Raghav的要点链接

<Switch>
<Container>
<Route exact path="/" component={ Greetings }></Route>
<Route path="/customers" component={ Customers }></Route>
</Container>
</Switch>

这个问题的
2. 第二个也是更新的解决方案是使用<React.Fragment>标签，该标签在较新版本的 React 中可用。<React.Fragment>将帮助您在组件中包装多个元素，而不是使用真正的 html 标记。 它不会将任何额外的元素呈现到页面中

~~> 链接到 React 文档

的片段