You should not use <withRouter(TransitionSwitch) /> outside a <Router>

Question

I'm having an issue where I can't run my React app all of a sudden. I don't use withRouter (or TransitionSwitch) in any of the code directly, and the app was running fine on the current commit before using Webpack to build the dev server. I can't make any sense of it, any help will be greatly appreciated!

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from '@components/App';
import storeInstance from "./store/Store";

export const StoreContext = React.createContext(storeInstance);

ReactDOM.render(
  <StoreContext.Provider value={storeInstance}>
    <App />
  </StoreContext.Provider>
  , document.getElementById('app'));

/** Hot Module Replacement */
if (process.env.NODE_ENV == 'development' && module.hot) {
  module.hot.accept();
}

App.tsx

import React from 'react';
import Login from '@components/Login';
import Wallet from '@components/Wallet';
import Register from '@components/Register';
import Profile from '@components/Profile';
import { hot } from 'react-hot-loader/root';
import { setupUserHist } from '../userHist';
import {
  BrowserRouter as Router,
  Route
} from "react-router-dom";
import Switch from 'react-router-transition-switch';
import Fader from 'react-fader';

import * as styles from '@styles/scss/app.scss';


class App extends React.Component<{}, {}> {

  render() {
    return (
      <Router>
        <div className={styles.titleBar}></div>
        <div className={styles.appContainer}>
          <Switch component={Fader}>
            <Route exact path="/">
              <Login />
            </Route>
            <Route path="/wallet">
              <Wallet />
            </Route>
            <Route path="/profile">
              <Profile />
            </Route>
            <Route path="/register">
              <Register />
            </Route>
          </Switch>
        </div>
      </Router>
    );
  }
}

export default hot(App);

package.json

"dependencies": {
    "@hot-loader/react-dom": "^16.13.0",
    "@types/react-router": "^5.1.12",
    "axios": "^0.21.1",
    "concurrently": "^6.0.0",
    "i18next": "^19.8.4",
    "i18next-xhr-backend": "^3.2.2",
    "mobx": "^6.0.4",
    "mobx-react": "^7.0.5",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-fader": "^3.1.1",
    "react-i18next": "^10.9.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-router-transition-switch": "^1.1.2",
    "uuid": "^8.3.2",
    "wait-on": "^5.3.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.8.3",
    "@babel/core": "^7.8.3",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-proposal-decorators": "^7.12.12",
    "@babel/preset-env": "^7.8.3",
    "@babel/preset-typescript": "^7.8.3",
    "@types/node": "^14.0.11",
    "@types/react": "^16.9.35",
    "@types/react-dom": "^16.9.8",
    "@types/uuid": "^8.3.0",
    "@types/webpack-env": "^1.15.2",
    "cross-env": "^7.0.2",
    "css-loader": "^3.6.0",
    "electron": "^12.0.2",
    "electron-builder": "^22.10.5",
    "electron-is-dev": "^2.0.0",
    "error-overlay-webpack-plugin": "^0.4.1",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.3.0",
    "node-sass": "^4.14.1",
    "react-hot-loader": "^4.12.21",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.2.1",
    "ts-loader": "^7.0.5",
    "typescript": "^3.9.2",
    "url-loader": "^4.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  }

Answer 1

Probably you need to use Switch from "react-router" package instead of "react-router-transition-switch".

import { Switch } from "react-router";