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

Posted 2023-02-22

【中文标题】为啥 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, useEffectfrom '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()))
             
         
    

感谢您的帮助

晚安

【参考方案1】：

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

export default withRouter(Movements)

在运动页面上。