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

反应路由器Redux已被弃用，因此您的错误很可能是此弃用的结果。您应该迁移到可与Redux配合使用的React Router（请参见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>
}

未捕获的错误：不应在<router>之外使用<switch>，但是Switch在内部

1 个答案: