Why is withRouter used with connect () breaking my react app?

Question

Good evening everyone,

I have been trying to add withRouter to my react app so it does not break because of the connect function (see code below).

My code is working, but when i add withRouter to the line below, it breaks my app with the following message :

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));

Error: Invariant failed: You should not use <withRouter(Connect(App)) /> outside a Router>

i found this topic : Invariant failed: You should not use <Route> outside a <Router> but it's not helping me with me issue when i try to replace with a single Router

Please find below the whole code used :

App.js

import React, {useEffect}from 'react';
import { BrowserRouter } from 'react-router-dom'
import { Route, Redirect} from 'react-router-dom'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import * as actions from './store/actions/index'

// Composants
import Layout from './components/hoc/Layout/Layout'
import BudgetHandler from './components/BudgetHandler/BudgetHandler'
import DashBoard from './components/DashBoard/DashBoard'
import Movements from './components/Movements/Movements'
import Home from './components/Home/Home'
import Logout from './components/Logout/Logout'

import classes from './App.module.css'

const App = (props) => {
  useEffect(() => {
    props.onTryAutoSignup()
  },[])

  let routes = <React.Fragment>
    <Route path="/" exact component={Home} />
    <Redirect to="/" />
    </React.Fragment>

  if(props.isAuthentificated) {
    routes = <React.Fragment>
        <Route path="/movements" component={Movements} />
        <Route path="/dashboard" component={DashBoard} />
        <Route path="/logout" component={Logout} />
        <Route path="/handler" component={BudgetHandler} />
        <Redirect to="/dashboard" />
    </React.Fragment>
  }

  return (
    <div className={classes.App}>
      <BrowserRouter>
      <Layout>
        {routes}
      </Layout>
      </BrowserRouter>
    </div>
  );
}

const mapStateToProps = state => {
  return {
    isAuthentificated: state.auth.token !== null
  }
}

const mapDispatchToProps = dispatch => {
  return {
    onTryAutoSignup: () => dispatch(actions.authCheckState())
  }
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));

And this is happening because i am trying to add this function to the useEffect hook to check permanently if the user is auth or not :

in actions/auth.js

export const authCheckState = () => {
    return dispatch => {
         const token = localStorage.getItem('token')
         if(!token) {
             dispatch(logout())
         } else {
             const expirationTime = new Date(localStorage.getItem('expirationDate'))
             const userId = localStorage.getItem('userId')
             if(expirationTime > new Date()){
                 dispatch(logout())
             } else {
                dispatch(finalSignIn(token, userId))
                dispatch(checkAuthTimeout(expirationTime.getSeconds() - new Date().getSeconds()))
             }
         }
    }
}

Thank you for your help

Have a good evening

score 0 · Accepted Answer · answered Oct 21 '20 at 16:14

0

withRouter can only be used in children components of element. In your case can be used with Movements, DashBoard and other childrens. use it while exporting Movements like

export default withRouter(Movements)

on Movements page.

answered Oct 21 '20 at 16:14

Ukesh Shrestha

141
6

Why is withRouter used with connect () breaking my react app?

1 Answers1