javascript - react - توجيه العميل(باستخدام جهاز توجيه التفاعل) والتوجيه من جانب الخادم




react-router-dom npm (2)

مع 1.0 ، يعتمد React-Router على وحدة history باعتبارها peerDependency. تتعامل هذه الوحدة مع التوجيه في المتصفح. بشكل افتراضي ، يستخدم pushState -Router واجهة برمجة تطبيقات HTML5 History ( pushState ، replaceState ) ، ولكن يمكنك تهيئته لاستخدام التوجيه القائم على التجزئة (انظر أدناه)

تتم معالجة المسار الآن خلف الكواليس ، ويرسل ReactRouter دعائم جديدة إلى معالجات الطريق عندما يتغير المسار. يحتوي جهاز التوجيه على رد onUpdate جديد عند onUpdate عندما يتغير المسار أو يكون مفيدًا لتتبع مشاهدة الصفحة أو تحديث <title> ، على سبيل المثال.

العميل (توجيه HTML5)

import {Router} from 'react-router'
import routes from './routes'

var el = document.getElementById('root')

function track(){
  // ...
}

// routes can be children
render(<Router onUpdate={track}>{routes}</Router>, el)

العميل (التوجيه القائم على التجزئة)

import {Router} from 'react-router'
import {createHashHistory} from 'history'
import routes from './routes'

var el = document.getElementById('root')

var history = createHashHistory()

// or routes can be a prop
render(<Router routes={routes} history={history}></Router>, el)

الخادم

على الخادم ، يمكننا استخدام ReactRouter.match ، هذا مأخوذ من دليل تقديم الخادم

import { renderToString } from 'react-dom/server'
import { match, RoutingContext } from 'react-router'
import routes from './routes'

app.get('*', function(req, res) {
  // Note that req.url here should be the full URL path from
  // the original request, including the query string.
  match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
    if (error) {
      res.status(500).send(error.message)
    } else if (redirectLocation) {
      res.redirect(302, redirectLocation.pathname + redirectLocation.search)
    } else if (renderProps) {
      res.status(200).send(renderToString(<RoutingContext {...renderProps} />))
    } else {
      res.status(404).send('Not found')
    }
  })
})

لقد كنت أفكر وأنا مرتبك مع التوجيه بين العميل والخادم. افترض أنني أستخدم ReactJS للتقديم من جانب الخادم قبل إرسال الطلب مرة أخرى إلى مستعرض الويب ، واستخدم موجه التفاعل كتدبير من جانب العميل للتبديل بين الصفحات دون تحديث كـ SPA.

ما يتبادر إلى الذهن هو:

  • كيف يتم تفسير الطرق؟ على سبيل المثال ، طلب من الصفحة الرئيسية ( /home ) إلى صفحة المنشورات ( /posts )
  • أين يذهب التوجيه ، من جانب الخادم أو العميل؟
  • كيف تعرف كيف تتم معالجتها؟

ملاحظة ، تغطي هذه الإجابة إصدار React Router 0.13.x - يبدو أن الإصدار القادم 1.0 سيكون له تفاصيل تنفيذ مختلفة بشكل كبير

الخادم

هذا هو server.js الحد الأدنى مع رد فعل الموجه:

var express = require('express')
var React = require('react')
var Router = require('react-router')

var routes = require('./routes')

var app = express()

// ...express config...

app.use(function(req, res, next) {
  var router = Router.create({location: req.url, routes: routes})
  router.run(function(Handler, state) {
    var html = React.renderToString(<Handler/>)
    return res.render('react_page', {html: html})
  })
})

حيث تصدر وحدة routes قائمة routes :

var React = require('react')
var {DefaultRoute, NotFoundRoute, Route} = require('react-router')

module.exports = [
  <Route path="/" handler={require('./components/App')}>
    {/* ... */}
  </Route>
]

في كل مرة يتم فيها تقديم طلب إلى الخادم ، تقوم بإنشاء مثيل Router للاستخدام مرة واحدة تم تكوينه باستخدام عنوان URL الوارد كموقع ثابت ، ويتم حلها مقابل مجموعة الطرق لإعداد الطرق المتطابقة المناسبة ، مع إعادة الاتصال بأعلى يتم تقديم معالج توجيه المستوى والمستوى الذي تطابقت به المسارات الفرعية في كل مستوى. هذا هو ما تمت استشارته عند استخدام المكون <RouteHandler> داخل مكون التعامل مع المسار لتقديم مسار <RouteHandler> تم مطابقته.

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

زبون

هذا هو client.js الحد الأدنى مع رد فعل الموجه (إعادة استخدام وحدة التوجيه نفسها):

var React = require('react')
var Router = require('react-router')

var routes = require('./routes')

Router.run(routes, Router.HistoryLocation, function(Handler, state) {
  React.render(<Handler/>, document.body)
})

عندما تتصل بـ Router.run() ، فإنه ينشئ Router.run() التوجيه خاص بك خلف الكواليس ، يتم إعادة استخدامه في كل مرة تتنقل فيها حول التطبيق ، حيث يمكن أن يكون عنوان URL ديناميكيًا على العميل ، على عكس الخادم على طلب واحد له عنوان URL ثابت.

في هذه الحالة ، نستخدم HistoryLocation ، والذي يستخدم History API للتأكد من أن الشيء الصحيح يحدث عندما تضغط على زر الرجوع / الأمام. هناك أيضًا HashLocation الذي يغير hash عنوان URL لإنشاء إدخالات السجل والاستماع إلى حدث window.onhashchange لتشغيل التنقل.

عند استخدام مكون <Link> الخاص بجهاز التوجيه ، فأنت تعطيه اسمًا للدفع وهو اسم المسار ، بالإضافة إلى أي بيانات params وبيانات query يحتاجها المسار. يحتوي <a> المقدم من هذا المكون على معالج onClick والذي يستدعي في نهاية المطاف router.transitionTo() على مثيل جهاز التوجيه باستخدام الدعائم التي قدمتها ، والتي تبدو كما يلي:

  /**
   * Transitions to the URL specified in the arguments by pushing
   * a new URL onto the history stack.
   */
  transitionTo: function (to, params, query) {
    var path = this.makePath(to, params, query);

    if (pendingTransition) {
      // Replace so pending location does not stay in history.
      location.replace(path);
    } else {
      location.push(path);
    }
  },

بالنسبة للرابط المنتظم ، فإن هذا في نهاية المطاف يستدعي location.push() أخبر الموجه بأنه يمكنه متابعة الانتقال إلى مسار URL الجديد.

يقوم الموجه بعد ذلك باستدعاء طريقة router.dispatch() الخاصة به router.dispatch() URL الجديد ، والذي يتعامل مع تفاصيل تحديد أي من المسارات المكونة تتطابق مع عنوان URL ، ثم يستدعي أي روابط انتقال موجودة للطرق المتطابقة. يمكنك تنفيذ خطافات النقل هذه على أي من معالجات المسار لديك لاتخاذ بعض الإجراءات عندما يكون الطريق على وشك التنقل فيه أو الانتقال إليه ، مع القدرة على إحباط الانتقال إذا لم تكن الأمور تروق لك.

إذا لم يتم إحباط عملية النقل ، فإن الخطوة الأخيرة هي استدعاء رد الاتصال الذي أعطيته إلى Router.run() بمكون معالج المستوى الأعلى وكائن حالة به جميع تفاصيل عنوان URL Router.run() المتطابقة. مكون معالج المستوى الأعلى هو في الواقع مثيل Router نفسه ، والذي يتعامل مع تقديم معالج المسار الأعلى الذي تم مطابقته.

تتم إعادة تشغيل العملية أعلاه في كل مرة تنتقل فيها إلى عنوان URL جديد على العميل.

مشاريع مثال





url-routing