react-router-dom 开关需要额外的 div 包装器答案

【问题标题】：react-router-dom Switch needs additional div wrapperreact-router-dom 开关需要额外的 div 包装器
【发布时间】：2018-12-09 18:42:52
【问题描述】：

我正在使用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 />s，则不会呈现页面，并且控制台中也不会抛出错误或异常。

有什么问题？我在某处做错了吗？任何帮助表示赞赏。

编辑：

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

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

<div>

【问题讨论】：

您能分享您遇到的错误并分享 Greetings 组件的代码吗？仅供参考，我可以看到您已经使用 2 个组件配置了“/”根路径，这将起作用，但始终会返回第一个。
你能在codesandbox.io之类的地方做一个小复制吗？
用你的代码制作了一个模拟反应应用程序，它的工作不需要额外的div，看看。 codesandbox.io/s/n9nqjvr1vm。如果可能，请使用一些堆栈跟踪更详细地解释您的错误，或者如果您可以将整个代码库上传到某个公共存储库。
@ShobhitChittora 我已经用 2 个组件配置了“/”根路径，因为我希望在所有页面中呈现第一个。这将是我的容器。
谢谢。但是您刚刚删除了并且在中只使用了一个这意味着它将返回唯一的 Route 标记并且运行良好。但问题是当我需要为特定路径提供 2 个组件时@RaghavGarg

标签： javascript reactjs react-router react-redux react-router-dom

【解决方案1】：

有两种解决方案：

Raghav 在 cmets 中提到的解决方案：这可以通过将第一个<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

【讨论】：