在反应路由器中的组件之间导航时保​​持状态

时间：2021-04-24 10:39:39

标签： reactjs react-redux react-router

假设我想在我的项目中有一个可重用的 React 组件。我还希望该组件在不同位置具有其状态，而不会在组件卸载期间丢失它。在 React 中处理这种架构的正确方法是什么？换句话说，当用户在这两条路由之间导航时，react 会卸载前一个组件，因此它会在 /user 和 /groups 路由之间的每个导航上加载远程数据。 我也知道有一种叫做 Redux 的东西。我没有看到如何使用reduce来做到这一点的明确方法。我需要两个减速器吗？一个用于用户，另一个用于组？如果是这样，每次当我需要使用 ReusableComponent 时，创建一个新的 reducer 并编写新的逻辑是很不方便的。
这是一个类似的骨架来描述我正在尝试做的事情。任何提示都会有所帮助。

//Router example
<Router>
   <Switch>
       <Route exact path=”/users” >
           <UserComponent>
               <ReusableComponent url=”http://apidomain.com/users” />
           </UserComponent>
       </Route>
     <Route exact path=”/groups” >
           <GroupComponent>
               <ReusableComponent url=”http://apidomain.com/groups” />
           </GroupComponent>
       </Route>
   </Switch>
</Router>

//ReusableComponent Example
<ReusableComponent>
    --->use url, that passed from parent component tree(users or groups) to load data and keep in state
    <ReusableComponentContext> 
        <Head />
        <Body />
        <Footer />
   </ReusableComponentContext>
</ReusableComponent>

编辑 因此，为了更好地描述我的问题，我需要在不同位置拥有具有两个或多个并行状态的相同组件，而不会相互覆盖。如果可能

3 个答案:

答案 0 :(得分：0)

我会使用“React Context”api。上下文包装您的应用程序，因此如果一个组件更新/重新呈现存储在上下文中的状态保持不变。要使用 Context，您需要三个文件：

"UserContext" = 示例 => 重命名！

上下文组件（UserContext）

import { createContext } from "react"

export const UserContext = createContext(initValue)

父组件（提供者）

//文件名：UserContext.js

//* import React, { useState } from "react"
//* import UserContext from "./UserContext"


  const [state, setState] = useState("initState")
  
//* return(
  <UserContext.Provider value={{state, setState}}> //value="props"
      <ChildComponent/> 
  </UserContext.Provider>

子组件（消费者）

//*import React, { use Context } from "react";
//*import {UserContext} from "./UserContext"

  const data = useContext(UserContext) //here "UserContext"

源代码：short explenation of usage

编辑：使用自定义钩子消费

为了避免一个 import-statement，你可以像这样创建一个自定义 Hook

import React, { use Context } from "react";
import {UserContext} from "./UserContext";

const useUserContext = (()=>{
    const {state, setState} = useContext(UserContext)
//use effect if you want to set the context? with the hook...
    return[state, setState]
})

在您的重新安装组件中

import useUserContext from "./useUserContext"

//rfce{
const {state, setState} = useUserContext()
//}

答案 1 :(得分：0)

您可以将 ReusableComponent 连接到您的 Redux 存储区（有关详细信息，请参阅 connect）。

import { connect } from "react-redux";

const ReusableComponent = (props) => {
    // some logic before return
    return <div>{props.magicProperty}</div>
}

const mapStateToProps = (state) => ({ magicProperty: state.magicProperty });
return connect(mapStateToProps)(ReusableComponent);

因此，每次您在应用中使用 ReusableComponent 时，magicProperty 都是共享的，您还可以将一些操作连接到组件，以便在经典 Redux 流程中管理该部分状态。< /p>

答案 2 :(得分：0)

我想我找到了解决方案。就我而言，我对在路由器组件树中放置上下文提供程序标签的级别有一些误解。所以在 React 中，将上下文提供程序包装器放在正确的位置非常重要。它仅为由该上下文提供程序包装的那些子组件持有一个专用状态。

在我的例子中，我在 ReusableComponent 里面有 ReusableComponentContext，这是错误的方法因为我在任何地方使用 ReusableComponent 它都有单独的上下文（因此个人状态）。我将 ReusableComponentContext 移到几个组件的顶部来解决我的问题。

相关问题
最新问题