Акция-router-dom Switch требует дополнительной оболочки div - PullRequest
Новая
       8

Акция-router-dom Switch требует дополнительной оболочки div

0 голосов
/ 01 июля 2018

Я использую 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 />, иначе он не будет работать. Это означает, что если я удаляю элемент <div /> внутри <Switch /> и оборачиваю <Route /> непосредственно в <Switch />, страницы не будут отображаться, а также не будут возникать ошибки или исключения в консоли.

В чем проблема? Я где то не так делаю? Любая помощь приветствуется.

Edit:

Спасибо всем за полезные комментарии. Вот несколько важных вещей для рассмотрения:

  1. Я не получаю никакой ошибки или предупреждения, сценарий реакции работает нормально и полностью компилирует мой код.

  2. Как вы упомянули, будет отображаться только первый элемент <Route> определенного пути, но когда я добавлю элемент <div> в качестве первого уровня элемента <Switch> в качестве оболочки для всех <Route> с это будет работать нормально. Но проблема в том, что мне не нужен дополнительный элемент <div> для визуализации. Пожалуйста, учтите, что я хотел бы, чтобы компонент Контейнер отображался на всех страницах, а другие компоненты по тому же пути ('/') должны отображаться как дочерние элементы Контейнера.

1 Ответ

0 голосов
/ 04 июля 2018

Есть два решения:

  1. Решение, которое Рагхав упомянул в комментариях: Это можно сделать, сделав первый <Route /> - который мне нужно отобразить на всех страницах - как компонент контейнера и использовать его как обертку для других <Route /> внутри тега <Switch >. Ссылка Gist от @ Raghav 

<Switch>
    <Container>
        <Route exact path="/" component={ Greetings }></Route>
        <Route path="/customers" component={ Customers }></Route>
    </Container>
</Switch>
  1. Второе и более новое решение этой проблемы - использование тега <React.Fragment>, доступного в более новых версиях React. <React.Fragment> поможет вам обернуть несколько элементов в вашем компоненте вместо использования реальных HTML-тегов. Он не будет отображать лишние элементы на странице

~~> Ссылка на документацию React для фрагмента

...