javascript - tutorial - react-router-dom




كيفية الحصول على المسار الحالي في رد فعل جهاز التوجيه 2.0.0-rc5 (6)

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

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

احصل عليه؟

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

<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('/')
}

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

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


اعتبارا من الإصدار 3.0.0 ، يمكنك الحصول على المسار الحالي عن طريق الاتصال:

this.context.router.location.pathname

رمز عينة أدناه:

var NavLink = React.createClass({
    contextTypes: {
        router: React.PropTypes.object
    },

    render() {   
        return (
            <Link {...this.props}></Link>
        );
    }
});


في App.js أضف الكود أدناه وحاول

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

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

window.location.pathname

isActive سيعود صحيحة أو خاطئة.

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


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

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

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

معطى...

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

يعرض currentRoute.path 'childpath' ويعيد function _class() { ... } .





react-router