javascript - 未捕获错误 : You should not use <Switch> outside a <Router>, 但开关在里面

Question

当我尝试运行我的应用程序时，开发者工具给我这个错误。

我想不通，因为我将 Switch 组件放在了 ConnectedRouter 中。有什么想法吗？

src.ca056580.js:28856 Uncaught Error: You should not use <Switch> outside a <Router>
    src.ca056580.js:25432 The above error occurred in one of your React components:
    in Switch (created by Routes)
    in Routes (created by AuthenticatedAppView)
    in ErrorBoundary (created by AuthenticatedAppView)
    in div (created by Tag(div))
    in Tag(div) (created by AppWidth)
    in AppWidth (created by AppContent)
    in main (created by index_AppContentLayout)
    in index_AppContentLayout (created by AppContent)
    in AppContent (created by AuthenticatedAppView)
    in div (created by Tag(div))
    in Tag(div) (created by index_AppLayout)
    in index_AppLayout (created by AuthenticatedAppView)
    in AuthenticatedAppView (created by Connect(AuthenticatedAppView))
    in Connect(AuthenticatedAppView) (created by Route)
    in Route (created by withRouter(Connect(AuthenticatedAppView)))
    in withRouter(Connect(AuthenticatedAppView)) (created by App)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by App)
    in Provider (created by App)
    in App (created by HotExportedApp)
    in AppContainer (created by HotExportedApp)
    in HotExportedApp
    in ModalStack (created by AppRoot)
    in OverlayState (created by AppRoot)
    in div (created by AppLayerContainer)
    in AppLayerContainer (created by AppLayers)
    in div (created by AppLayerContainer)
    in AppLayerContainer (created by AppLayers)
    in AppLayers (created by AppRoot)
    in AppRoot

但是您可以看到 ConnectRouter 已经创建。以下是代码片段。

AuthenticatedApp 导入了一个 Routes 组件，其中包含

class AuthenticatedAppView extends Component<AuthenticatedAppViewProps> {
  componentDidMount() {
    this.props.fetchCompanies()
  }

  render() {
    return (
      <AppLayout>
        <MenuBar />
        <AppContent>
          <ErrorBoundary
            errorTitle="We're having trouble loading the requested page."
            errorComponent={ErrorView}
          >
            <Routes />
          </ErrorBoundary>
        </AppContent>
      </AppLayout>
    )
  }
}

这是Routes组件，包含Switch和路由

const Routes = () => (
  <Switch>
    <Route path="/" exact render={() => <Redirect to="/companies" />} />
    <Route path="/companies" component={SelectCompanies} />
    <Route render={() => <RouteNotDefined />} />
  </Switch>
)

export default Routes

这是App/组件，它在Router中包含了AuthenticatedApp组件，所以Switch应该也在Router中。我做错了什么？

import React from 'react'
import { hot } from 'react-hot-loader'
import { Provider } from 'react-redux'
import { ConnectedRouter as Router } from 'react-router-redux'
import createHistory from 'history/createBrowserHistory'
import { configureStore } from './configureStore'
import AuthenticatedApp from './AuthenticatedApp'

const history = createHistory({ basename: '/' })

const store = configureStore(history)

const App = () => (
  <Provider store={store}>
    <Router history={history}>
      <AuthenticatedApp />
    </Router>
  </Provider>
)

export default hot(module)(App)

Answer 1

React Router Redux 已被弃用，因此您的错误很可能是此弃用的结果。您应该迁移到 React Router，它可以很好地与 Redux 配合使用(请参阅 router-side、redux-side)。

您需要 npm install react-router-dom 以便在浏览器中使用。

借助 React Router，您可以使用 BrowserRouter替换您的 ConnectedRouter。

这是一个示例(在 App.js 中):

import React from 'react';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import { store } from './redux-store';
import AuthenticatedApp from './AuthenticatedApp'

const App = () => {
    <Provider store={ store }>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </Provider>
}