Uncaught Error: Вы не должны использовать <Switch>вне <Router>, но Switch находится внутри

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

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 (см. на стороне маршрутизатора , на стороне редуктора ).

Вам понадобится 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>
}