为什么 withRouter 与 connect() 一起使用会破坏我的反应应用程序？答案

【问题标题】：Why is withRouter used with connect () breaking my react app?为什么 withRouter 与 connect() 一起使用会破坏我的反应应用程序？
【发布时间】：2021-02-04 14:02:17
【问题描述】：

大家晚上好，

我一直在尝试将 withRouter 添加到我的反应应用程序中，这样它就不会因为连接功能而中断（参见下面的代码）。

我的代码正在运行，但是当我将 withRouter 添加到下面的行时，它会通过以下消息破坏我的应用程序：

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

错误：不变量失败：您不应在路由器外使用 >

我找到了这个主题：Invariant failed: You should not use <Route> outside a <Router>，但是当我尝试用单个路由器替换时，它并没有帮助我解决问题

请在下面找到使用的整个代码：

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

发生这种情况是因为我试图将此函数添加到 useEffect 挂钩中以永久检查用户是否是 auth：

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

感谢您的帮助

晚安

【问题讨论】：

标签： reactjs router

【解决方案1】：

withRouter 只能用在 element 的子组件中。在您的情况下，可以与运动、仪表板和其他儿童一起使用。在导出动作时使用它，例如

export default withRouter(Movements)

在运动页面上。

【讨论】：