代码之家 › 专栏 › 技术社区 › Hayk Safaryan

ConnectedRouter A<Router>可能只有一个子元素,但它有一个子元素

react-router-redux react-router redux reactjs

Hayk Safaryan · 技术社区 · 6 年前

所以我有我的 App.tsx 我使用来自react router 4的交换机

import { Rate } from 'antd'
import * as React from 'react'
import './App.scss'

import { Route, Switch } from 'react-router' // react-router v4

class App extends React.Component {
  public render() {
    return (
      <div className="App">
        <div> { /* your usual react-router v4 routing */}
          <Switch>
            <Route exact path="/" render={() => (<div>Match</div>)} />
            <Route render={() => (<div>Miss</div>)} />
            <Rate />
          </Switch>
        </div>
      </div>
    )
  }
}

export default App

我有 index.tsx 这样地在这里,我使用连接的react路由器连接到redux。

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import App from './App'
import './index.scss'
import registerServiceWorker from './registerServiceWorker'

import store, { history } from './store'

import { Provider } from 'react-redux'
import { ConnectedRouter } from 'connected-react-router'

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}> { /* place ConnectedRouter under Provider */}
      <App />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root') as HTMLElement
)
registerServiceWorker()

正如你所看到的,路由器确实只有一个元素,但是我得到一个错误,路由器应该只有一个子节点。这是连接的react路由器的错误还是我在这里遗漏了什么?

1 回复 | 直到 6 年前

Patrick Hund 6 年前

里面的评论 ConnectedRouter 组件导致问题。事实证明,评论也算是孩子。通过将注释移动到上面一行来修复它:

ReactDOM.render(
  <Provider store={store}>
    { /* place ConnectedRouter under Provider */}
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root') as HTMLElement
)

推荐文章