javascript react-router-dom - كيفية الحصول على الطريق الحالي في react-router 2.0.0-rc5




v4 tutorial (7)

لدي جهاز توجيه مثل أدناه:

<Router history={hashHistory}>
    <Route path="/" component={App}>
        <IndexRoute component={Index}/>
        <Route path="login" component={Login}/>
    </Route>
</Router>

إليك ما أريد تحقيقه:

  1. إعادة توجيه المستخدم إلى /login إذا لم يتم تسجيل الدخول
  2. إذا حاول المستخدم الوصول /login عند تسجيل الدخول بالفعل ، قم بإعادة توجيهه إلى الجذر /

لذلك أنا الآن أحاول التحقق من حالة المستخدم في componentDidMount ، ثم نفذ شيئًا مثل:

if (!user.isLoggedIn) {
    this.context.router.push('login')
} else if(currentRoute == 'login') {
    this.context.router.push('/')
}

المشكلة هنا هي أنني لا أستطيع العثور على واجهة برمجة التطبيقات للحصول على المسار الحالي.

لقد وجدت هذه المشكلة المغلقة المقترحة باستخدام Mixter.ActiveState mixin and route handlers ، ولكن يبدو أن هذين الحلين قد تم إهمالهما الآن.


Answers

إذا كنت تستخدم السجل ، فحينئذٍ يضع جهاز التوجيه كل شيء في الموقع من السجل ، مثل:

this.props.location.pathname;
this.props.location.query;

احصل عليه؟


لأي مستخدم لديه نفس المشكلة في عام 2017 ، قمت بحلها بالطريقة التالية:

NavBar.contextTypes = {
    router: React.PropTypes.object,
    location: React.PropTypes.object
}

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

componentDidMount () {
    console.log(this.context.location.pathname);
}

يمكنك الحصول على الطريق الحالي باستخدام

const currentRoute = this.props.routes[this.props.routes.length - 1];

... مما يمنحك الوصول إلى الدعائم من المكون النشط <Route ...> ذي المستوى الأدنى.

معطى...

<Route path="childpath" component={ChildComponent} />

إرجاع currentRoute.path 'childpath' و currentRoute.component بإرجاع function _class() { ... } .


يعمل لي بالطريقة نفسها:

...
<MyComponent {...this.props}>
  <Route path="path1" name="pname1" component="FirstPath">
  ...
</MyComponent>
...

ثم يمكنني الوصول إلى "this.props.location.pathname" في دالة MyComponent.

لقد نسيت أنه أنا ...))) بعد الرابط يصف أكثر لجعل شريط التنقل الخ: يستجيب هذا router.props.location


يمكنك استخدام دعامة "isActive" مثل:

const { router } = this.context;
if (router.isActive('/login')) {
    router.push('/');
}

isActive سيعود صواب أو خطأ.

اختبارها مع رد فعل الموجه 2.7



يمكنك أيضًا الحصول على عرض وارتفاع WINDOW ، وتجنب أشرطة أدوات المتصفح وأشياء أخرى. إنها المنطقة الحقيقية القابلة للاستخدام في نافذة المتصفح .

للقيام بذلك ، استخدم: خصائص window.innerHeight و window.innerHeight ( w3schools.com/jsref/prop_win_innerheight.asp ).

في معظم الحالات ، ستكون أفضل طريقة ، على سبيل المثال ، لعرض مربع حوار مشروط عائم متمركز بشكل مثالي. يسمح لك بحساب المواضع على النافذة ، بغض النظر عن اتجاه الدقة أو حجم النافذة الذي يستخدم المتصفح.





javascript reactjs react-router