Как отобразить родительский контейнер на главном маршрутизаторе

Я пытаюсь отобразить компонент контейнера и, используя более старую версию реактивного маршрутизатора, я видел, как люди делали это:

const AppRouter = () => (
  <Router component={App}>
    <Route exact path="/" component={Dashboard} />
  </Router>
);

Где выглядит мой компонент приложения:

import React, { PropTypes } from 'react';


class App extends React.Component {
  render() {
    return (
        <div>
          <p>Hello...</p>
          {this.props.children}
        </div>
      );
  }
}

export default App;

Мой package.json имеет это в настоящее время:

dependencies": {
    "history": "^4.7.2",
    "moment": "^2.20.1",
    "react": "^16.2.0",
    "react-dnd": "^2.5.4",
    "react-dnd-html5-backend": "^2.5.4",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^4.0.8",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  },

Кстати, нужно ли мне импортировать react-router и react-router-dom и react-router-redux при использовании react-router 4.2?


reactjs react-router
person Blankman    schedule 21.01.2018    source источник
comment
Вы пытаетесь визуализировать компоненты на основе маршрутов внутри вашего компонента приложения?   -  person Rosmarine Popcorn    schedule 22.01.2018
comment
Я не думаю, что вы можете использовать Router таким образом, по крайней мере, не в react-router v4. Что вы можете сделать, так это использовать ‹Route component={App}›, который вместо этого просто использует маршрут. И затем вы оборачиваете маршрутизатор вокруг всего этого. Вам не нужно импортировать react-router, если вы уже импортировали react-router-dom, и вам не нужно импортировать redux, если вы его не используете   -  person kng    schedule 22.01.2018

Ответы (2)


arrow_upward
1
arrow_downward

Вы просто пишете так:

const AppRouter = () => (
  <Router>
    <div>
      <App />
      <Route exact path="/" component={Dashboard} />
    </div>
  </Router>
);
person Matus    schedule 22.01.2018
comment
У меня ошибка: A <Router> may have only one child element - person Blankman; 23.01.2018

arrow_upward
0
arrow_downward

Пожалуйста, понизьте реакцию-маршрутизатор до версии 2.3.0.

Надеюсь, это сработает.

person Japar Sathik    schedule 22.01.2018