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

Question

我正在使用 react、react-router-dom 和 redux 创建一个简单的 React 应用程序。 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 /> 页面将不会呈现，也不会出现错误或异常抛出在控制台中。

有什么问题？我在某处做错了吗？感谢您的帮助。

编辑：

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

我没有收到任何错误或警告，React 脚本工作正常并完整地编译了我的代码。
如您所述，只有特定路径的第一个 <Route> 元素会被渲染，但是当我添加一个 <div> 元素作为 [=33= 的第一级时] 元素作为所有 <Route> 的包装器，它将正常工作。但问题是我不需要呈现额外的 <div> 元素。请注意，我希望在所有页面中呈现 Container 组件，而同一路径 ('/') 中的其他组件应呈现为 Container 的子组件。

Answer 1

有两种解决方案：

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

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

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

~~> Link to React documentation for Fragment

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

react-router-dom Switch needs additional div wrapper

javascript

reactjs

react-router

react-redux

react-router-dom