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

Question

大家晚上好，

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

我的代码可以正常工作，但是当我将 withRouter 添加到下面的行时，它会破坏我的应用程序并显示以下消息：

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

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

我找到了这个主题：但是当我尝试用单个路由器替换时它并没有帮助我解决问题

请在下面找到使用的全部代码：

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 挂钩以永久检查用户是否已授权：

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

感谢您的帮助

晚上好

Answer 1

withRouter 只能在element 的children 个组件中使用。在您的情况下，可以与 Movements、DashBoard 和其他 childrens 一起使用。在导出运动时使用它

export default withRouter(Movements)

在运动页面上。

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

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

router

reactjs