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 />元素，否则它将无法工作。这意味着，如果我删除<div />内的<Switch />元素并直接用<Route />包装<Switch />，则不会呈现页面，也不会出现错误或异常在控制台中。

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

编辑：

感谢所有有用的评论。这里有一些重要的考虑事项：

我没有收到任何错误或警告，react脚本可以正常运行，并且可以完全编译我的代码。
如前所述，仅会渲染特定路径的第一个<Route>元素，但是当我将<div>元素的第一级添加为<Switch>元素时，所有<Route>的包装，它将正常工作。但是问题是我不需要呈现额外的<div>元素。请考虑我希望将Container组件呈现在所有页面中，并且将相同路径（'/'）中的其他组件呈现为Container的子代。

Answer 1

有两种解决方案：

拉加夫在评论中提到的解决方案：可以通过将第一个<Route />（我需要在所有页面中呈现）作为容器组件并将其用作<Route />标签内其他<Switch >的包装来完成。 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交换机需要附加的div包装器

1 个答案: