Uncaught Error: You should not use <Switch> outside a <Router>, but Switch is inside

user_10543624 0
Viewed 2008

When I try to run my app, developer tool is giving me this error.

I can't figure it out because I placed the Switch component within ConnectedRouter. Any ideas anyone? 

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

But you can see ConnectRouter is created already. Here are the code snippets.

AuthenticatedApp imported a Routes component, which contains 

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>
    )
  }
}

This is the Routes component, containing Switch and the routes

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

export default Routes

This is the App/ component, it contains the AuthenticatedApp component inside Router, so Switch should've been in Router too. What am i doing wrong?

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)
react-router-v4 react-router react-redux reactjs javascript
1 Answers

React Router Redux has been deprecated so it's likely that your error is a result of this deprecation. You should migrate to React Router, which works fine with Redux (see router-side, redux-side).

You'll want to npm install react-router-dom for use in the browser.

With React Router, you can use the BrowserRouter to replace your ConnectedRouter.

Here's an example (in 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>
}
user_80686250
Related