كيف يمكنني استخدام React Router مع withRouter HOC داخل مكون الترتيب الأعلى الخاص بي (HOC)؟

0

لدي مكوّن طلب أعلى يستخدم location.search الدعامة المقدمة من React Router لإنشاء أ queryParams الاعتراض وتمريره كدعم لمكونه الملفوف.

function withQueryParams(WrappedComponent) {
    return (props) => {
        const queryParams = myUtils.parseParams(props.location.search); // props.location provided by React Router
        const newProps = {
            ...props,
            queryParams: queryParams
        }

        return <WrappedComponent {...newProps} />
    }
}

export default withQueryParams

وسأستخدمها على النحو التالي:

class MyComponent extends React.Component { ... }

export default withQueryParams(MyComponent)

وبالطبع سألتف MyComponent في الطريق:

<Route path="/mycomponent" component={MyComponent} />

ولكن بالعودة إلى بلدي withQueryParams أود أن أتأكد من ذلك props.location متاح دائمًا ، مما يعني أنني أرغب دائمًا في الحصول على دعائم من React Router. أدخل withRouter ، وهو بحد ذاته HOC يوفره React Router الذي يمكنك استخدامه لإتاحة هذه الأدوات.

ما هي أفضل طريقة للاستخدام withRouter داخل بلادي withQueryParams HOC لضمان ذلك props.location متاح؟

شكر.

2 الاجابة

2
افضل جواب

يمكنك لف المكون الخاص بك مع كل من HOCs withRouter و withQueryParams . يمكنك استخدام إعادة التركيب لتغليف مكوناتك مع هذه الأغطية. لقد قمت بإنشاء صندوق رمل لهذا. https://codesandbox.io/s/y493w29lz

أولاً ، اضغط على https://y493w29lz.codesandbox.io/main . سيتم عرض الناتج التالي على الشاشة.

MainComponent
SubComponent
"No Query Params available"

الآن ، حاول تمرير معلمة استعلام مثل https://y493w29lz.codesandbox.io/main؟query=hello . يمكنك أن ترى أن معلمات الاستعلام مطبوعة على الشاشة.

MainComponent
SubComponent
Query Params = {"query":"hello"}

هنا المكون SubComponent لا يقدمه Route ولكنه يتلقى معلمات الاستعلام حيث قمنا بتغليف هذا المكون باستخدام withRouter و withQueryParms HOCs.

export const SubComponent = compose(
  withRouter,
  withQueryParams
)(SubComponentView);

الآن ، إذا قدمت SubComponent فقط عن طريق الضغط على الرابط https://y493w29lz.codesandbox.io/sub؟query=hello . سيتم عرض الإخراج التالي.

SubComponent
Query Params = {"query":"hello"}

آمل أن يجيب هذا على سؤالك. :)

:مؤلف
0
function withQueryParams(WrappedComponent) {
        return withRouter((props) => {
           const queryParams = myUtils.parseParams(props.location.search); // props.location provided by React Router
           const newProps = {
               ...props,
               queryParams: queryParams
           }

           return <WrappedComponent {...newProps} />
        })
}

export default withQueryParams
:مؤلف
فوق
قائمة طعام