reactjs react-router-dom - التنقل برمجيا باستخدام جهاز التوجيه رد فعل




v4 tutorial (20)

باستخدام react-router يمكنني استخدام عنصر Link لإنشاء روابط يتم التعامل معها أصلاً بواسطة جهاز التوجيه المتفاعل.

أرى داخليا أنه يدعو هذا. this.context.transitionTo(...) .

أريد إجراء التنقل ، ولكن ليس من رابط ، من تحديد القائمة المنسدلة على سبيل المثال. كيف يمكنني القيام بذلك في الكود؟ ما هو this.context .

رأيت مزيج Navigation ، ولكن هل يمكنني القيام بذلك دون خلط؟


Answers

فيما يلي كيفية القيام بذلك مع react-router v2.0.0 ES6 react-router v2.0.0 مع ES6 . تحولت react-router بعيدا عن mixins.

import React from 'react';

export default class MyComponent extends React.Component {
  navigateToPage = () => {
    this.context.router.push('/my-route')
  };

  render() {
    return (
      <button onClick={this.navigateToPage}>Go!</button>
    );
  }
}

MyComponent.contextTypes = {
  router: React.PropTypes.object.isRequired
}

ببساطة ما عليك سوى استخدام this.props.history.push('/where/to/go');


تحذير: يغطي هذا الجواب فقط إصدارات ReactRouter قبل 1.0

سوف أقوم بتحديث هذه الإجابة مع حالات استخدام 1.0.0-rc1 بعد!

يمكنك القيام بذلك دون خلط أيضا.

let Authentication = React.createClass({
  contextTypes: {
    router: React.PropTypes.func
  },
  handleClick(e) {
    e.preventDefault();
    this.context.router.transitionTo('/');
  },
  render(){
    return (<div onClick={this.handleClick}>Click me!</div>);
  }
});

إن السياقة مع السياقات هي أنه لا يمكن الوصول إليها إلا إذا قمت بتعريف contextTypes في الفصل.

أما فيما يتعلق بالسياق ، فهو كائن ، مثل الدعائم ، يتم تمريره من الوالد إلى الطفل ، ولكن يتم نقله ضمنياً دون الحاجة إلى إعادة الدعائم في كل مرة. راجع https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html


قد لا يكون النهج الأفضل ولكن ... باستخدام reacti-router v4 ، قد يعطي Typescript التالي فكرة عن بعضها.

في العنصر الذي تم LoginPage أدناه ، على سبيل المثال LoginPage ، يمكن الوصول إلى كائن router واستدعاء router.transitionTo('/homepage') للتنقل.

تم أخذ رمز الملاحة من https://react-router.now.sh/Match .

"react-router": "^4.0.0-2", "react": "^15.3.1",

import Router from 'react-router/BrowserRouter';
import { History } from 'react-history/BrowserHistory';
import createHistory from 'history/createBrowserHistory';
const history = createHistory();

interface MatchWithPropsInterface {
  component: typeof React.Component,
  router: Router,
  history: History,
  exactly?: any,
  pattern: string
}

class MatchWithProps extends React.Component<MatchWithPropsInterface,any> {
  render() {
    return(
      <Match {...this.props} render={(matchProps) => (
             React.createElement(this.props.component, this.props)

        )}
       />
    )
  }
}

ReactDOM.render(
    <Router>
      {({ router }) => (
        <div>
          <MatchWithProps exactly pattern="/" component={LoginPage} router={router} history={history} />
          <MatchWithProps pattern="/login" component={LoginPage} router={router} history={history} />
          <MatchWithProps pattern="/homepage" component={HomePage} router={router} history={history} />
          <Miss component={NotFoundView} />
        </div>
      )}
    </Router>,

   document.getElementById('app')
);


React-Router v2

بالنسبة لأحدث إصدار ( v2.0.0-rc5 ) ، فإن طريقة التنقل الموصى بها هي من خلال الضغط مباشرة على مفردة المفردات. يمكنك رؤية ذلك في الإجراء في وثيقة التنقل خارج وثيقة المكونات .

مقتطف ذو صلة:

import { browserHistory } from 'react-router';
browserHistory.push('/some/path');

إذا كنت تستخدم واجهة برمجة تطبيقات التفاعل-الموجه الأحدث ، فستحتاج إلى استخدام history من this.props عندما تكون داخل المكونات بحيث:

this.props.history.push('/some/path');

كما أنه يوفر pushState ولكن هذا هو pushState لكل التحذيرات المسجلة.

في حالة استخدام react-router-redux ، فإنه يوفر وظيفة push يمكنك إرسالها على النحو التالي:

import { push } from 'react-router-redux';
this.props.dispatch(push('/some/path'));

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


ربما ليس الحل الأفضل ولكنه ينجز المهمة:

import { Link } from 'react-router-dom';

// create functional component Post
export default Post = () => (
    <div className="component post">

        <button className="button delete-post" onClick={() => {
            // ... delete post
            // then redirect, without page reload, by triggering a hidden Link
            document.querySelector('.trigger.go-home').click();
        }}>Delete Post</button>

        <Link to="/" className="trigger go-home hidden"></Link>

    </div>
);

في الأساس ، فإن المنطق المرتبط بإجراء واحد (في هذه الحالة حذف النشر) سينتهي في النهاية بالاتصال بمحفز لإعادة التوجيه. هذا ليس مثاليًا لأنك ستضيف "عقدة" لعقدة DOM إلى ترميزك حتى تتمكن من الاتصال بها بسهولة عند الحاجة. أيضا ، سوف تتفاعل مباشرة مع DOM ، والتي في مكون React قد لا تكون مرغوبة.

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


مع إصدار this.props.history.push('/location'); الحالي (15.3) ، this.props.history.push('/location'); عملت لي ، لكنها أظهرت التحذير التالي:

browser.js: 49 تحذير: تم إهمال [react-router] props.history و context.history . يرجى استخدام context.router .

وأنا حلها باستخدام context.router مثل هذا:

import React from 'react';

class MyComponent extends React.Component {

    constructor(props) {
        super(props);
        this.backPressed = this.backPressed.bind(this);
    }

    backPressed() {
        this.context.router.push('/back-location');
    }

    ...
}

MyComponent.contextTypes = {
    router: React.PropTypes.object.isRequired
};

export default MyComponent;

يمكنك التوجيه إلى مكون آخر بهذه الطريقة.

toProfile() {
   this.context.history.pushState(null, 'profile');
}

وإضافة onClickوظيفة

<li onClick={this.toProfile.bind(this)></li>

آمل أن يكون مفيدا بالنسبة لك.


React-Router 4.x الإجابة:

من ناحيتي ، أود أن أحصل على كائن تاريخ واحد يمكنني حمله حتى خارج المكونات. ما أحب القيام به هو الحصول على ملف history.js واحد أقوم باستيراده عند الطلب ، والتلاعب به فقط.

عليك فقط تغيير BrowserRouter إلى Router وتحديد محفوظات التاريخ. هذا لا يغير أي شيء لك إلا أن لديك كائن محفوظات خاص بك يمكنك التعامل معه كما تريد.

تحتاج إلى تثبيت history ، والمكتبة المستخدمة من قبل react-router .

استخدام مثال ، تدوين ES6:

history.js

import createBrowserHistory from 'history/createBrowserHistory'
export default createBrowserHistory()

BasicComponent.js

import React, { Component } from 'react';
import history from './history';

class BasicComponent extends Component {

    goToIndex(e){
        e.preventDefault();
        history.push('/');
    }

    render(){
        return <a href="#" onClick={this.goToIndex}>Previous</a>;
    }
}

تحرير 16 أبريل ، 2018:

إذا كنت مضطرًا إلى التنقل من أحد المكونات التي تم تقديمها بالفعل من مكوِّن Route ، يمكنك أيضًا الوصول إلى السجل من الدعامات ، مثل ذلك:

BasicComponent.js

import React, { Component } from 'react';

class BasicComponent extends Component {

    navigate(e){
        e.preventDefault();
        this.props.history.push('/url');
    }

    render(){
        return <a href="#" onClick={this.navigate}>Previous</a>;
    }
}

للقيام بالملاحة برمجياً ، تحتاج إلى دفع محفوظات جديدة إلى props.history في component الخاص بك ، بحيث يمكن القيام بشيء مثل هذا العمل لك:

//using ES6
import React from 'react';

class App extends React.Component {

  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick(e) {
    e.preventDefault()
    /* Look at here, you can add it here */
    this.props.history.push('/redirected');
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>
          Redirect!!!
        </button>
      </div>
    )
  }
}

export default App;

على أساس الإجابة السابقة
من خوسيه انطونيو بوستيجو وبن ويلر
الجدة؟ هو أن تكون مكتوبة في مخطوطة
واستخدام الديكور
أو خاصية / حقل ثابت

import * as React from "react";
import Component = React.Component;
import { withRouter } from "react-router";

export interface INavigatorProps {
    router?: ReactRouter.History.History;
}

/**
 * Note: goes great with mobx 
 * @inject("something") @withRouter @observer
 */
@withRouter
export class Navigator extends Component<INavigatorProps, {}>{
    navigate: (to: string) => void;
    constructor(props: INavigatorProps) {
        super(props);
        let self = this;
        this.navigate = (to) => self.props.router.push(to);
    }
    render() {
        return (
            <ul>
                <li onClick={() => this.navigate("/home")}>
                    Home
                </li>
                <li onClick={() => this.navigate("/about")}>
                    About
                </li>
            </ul>
        )
    }
}

/**
 * Non decorated 
 */
export class Navigator2 extends Component<INavigatorProps, {}> {

    static contextTypes = {
        router: React.PropTypes.object.isRequired,
    };

    navigate: (to: string) => void;
    constructor(props: INavigatorProps, context: any) {
        super(props, context);
        let s = this;
        this.navigate = (to) =>
            s.context.router.push(to);
    }
    render() {
        return (
            <ul>
                <li onClick={() => this.navigate("/home")}>
                    Home
                </li>
                <li onClick={() => this.navigate("/about")}>
                    About
                </li>
            </ul>
        )
    }
}

مع ما npm تركيبها اليوم. "react-router": "^ 3.0.0" and
"@ types / react-router": "^ 2.0.41"


مع React-Router v4 في الأفق ، هناك الآن طريقة جديدة للقيام بذلك.

import { MemoryRouter, BrowserRouter } from 'react-router';

const navigator = global && global.navigator && global.navigator.userAgent;
const hasWindow = typeof window !== 'undefined';
const isBrowser = typeof navigator !== 'undefined' && navigator.indexOf('Node.js') === -1;
const Router = isBrowser ? BrowserRouter : MemoryRouter;

<Router location="/page-to-go-to"/>

react-lego هو تطبيق مثال يوضح كيفية استخدام / تحديث جهاز التوجيه المتفاعل ويتضمن أمثلة على الاختبارات الوظيفية التي تنقل التطبيق.


لهذا واحد ، الذي لا يتحكم في جانب الخادم وبسبب هذا يستخدم جهاز التوجيه جهاز التوجيه V2:

ضع history في ملف منفصل (على سبيل المثال app_history.js ES6):

import { useRouterHistory } from 'react-router'
import { createHashHistory } from 'history'
const appHistory = useRouterHistory(createHashHistory)({ queryKey: false });

export default appHistory;

واستخدامها في كل مكان!

نقطة الإدخال الخاصة بك لموجه الاستجابة (app.js ES6):

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Redirect } from 'react-router'
import appHistory from './app_history'
...
const render((
  <Router history={appHistory}>
  ...
  </Router>
), document.querySelector('[data-role="app"]'));

التنقل داخل أي مكون (ES6):

import appHistory from '../app_history'
...
ajaxLogin('/login', (err, data) => {
  if (err) {
    console.error(err); // login failed
  } else {
    // logged in
    appHistory.replace('/dashboard'); // or .push() if you don't need .replace()
  }
})

كان الجواب الصحيح بالنسبة لي في وقت كتابة هذا التقرير

this.context.router.history.push('/');

ولكن تحتاج إلى إضافة PropTypes إلى المكون الخاص بك

Header.contextTypes = {
  router: PropTypes.object.isRequired
}
export default Header;

لا تنسَ استيراد PropTypes

import PropTypes from 'prop-types';

React-Router 4.0.0+ Answer

في 4.0 وأعلى ، استخدم التاريخ كدعم للمكون الخاص بك.

class Example extends React.Component {
   // use `this.props.history.push('/some/path')` here
};

React-Router 3.0.0+ Answer

في 3.0 وأعلى ، استخدم الموجه كدعم للمكون الخاص بك.

class Example extends React.Component {
   // use `this.props.router.push('/some/path')` here
};

React-Router 2.4.0+ الإجابة

في 2.4 وأعلى ، استخدم مكون ترتيب أعلى للحصول على جهاز التوجيه كدعم للمكون الخاص بك.

import { withRouter } from 'react-router';

class Example extends React.Component {
   // use `this.props.router.push('/some/path')` here
};

// Export the decorated class
var DecoratedExample = withRouter(Example);

// PropTypes
Example.propTypes = {
  router: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired
  }).isRequired
};

React-Router 2.0.0+ Answer

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

ومع ذلك ، إذا كنت ترغب في التبديل إلى النمط الجديد ، فهناك وحدة نمطية مستعرضة داخل جهاز التوجيه يمكنك الوصول إليها

import { browserHistory } from 'react-router'

الآن يمكنك الوصول إلى سجل المتصفح الخاص بك ، حتى تتمكن من القيام بأشياء مثل الدفع ، استبدال ، الخ ...

browserHistory.push('/some/path')

مزيد من القراءة: Histories Navigation

React-Router 1.xx الاجابة

لن أذهب إلى تفاصيل الترقية. يمكنك القراءة عن ذلك في دليل الترقية

يتمثل التغيير الرئيسي في السؤال هنا في التغيير من مزيج التنقل إلى السجل. والآن يستخدم متصفح historyAPI لتغيير المسار حتى نستخدم pushState() من الآن فصاعدًا.

وإليك مثالًا باستخدام Mixin:

var Example = React.createClass({
  mixins: [ History ],
  navigateToHelpPage () {
    this.history.pushState(null, `/help`);
  }
})

لاحظ أن هذا History يأتي من مشروع rackt/history . ليس من React-Router نفسها.

إذا كنت لا تريد استخدام Mixin لسبب ما (ربما بسبب فئة ES6) ، فيمكنك الوصول إلى السجل الذي تحصل عليه من الموجه من this.props.history . سيكون متاحًا فقط للمكونات المقدمة بواسطة جهاز التوجيه الخاص بك. لذا ، إذا كنت ترغب في استخدامه في أي من مكونات الطفل ، فيجب تمريره props عبر props .

يمكنك قراءة المزيد حول الإصدار الجديد في وثائق 1.0.x الخاصة به

في ما يلي صفحة مساعدة خاصة حول التنقل خارج المكون الخاص بك

توصي history = createHistory() مرجع history = createHistory() واستدعاء replaceState على ذلك.

React-Router 0.13.x Answer

لقد واجهت نفس المشكلة ولم أتمكن من العثور على الحل إلا باستخدام مزيج التنقل الذي يأتي مع جهاز التوجيه المتفاعل.

هنا كيف فعلت ذلك

import React from 'react';
import {Navigation} from 'react-router';

let Authentication = React.createClass({
  mixins: [Navigation],

  handleClick(e) {
    e.preventDefault();

    this.transitionTo('/');
  },

  render(){
    return (<div onClick={this.handleClick}>Click me!</div>);
  }
});

لقد تمكنت من استدعاء .context transitionTo() دون الحاجة إلى الوصول إلى .context

أو يمكنك تجربة class ES6 الفاخرة

import React from 'react';

export default class Authentication extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    e.preventDefault();

    this.context.router.transitionTo('/');
  }

  render(){
    return (<div onClick={this.handleClick}>Click me!</div>);
  }
}

Authentication.contextTypes = {
  router: React.PropTypes.func.isRequired
};

الرد-راوتر-مسترجع

ملاحظة: إذا كنت تستخدم Redux ، فهناك مشروع آخر يسمى React-Router-Redux والذي يعطيك روابط التجديد لـ ReactRouter ، وذلك باستخدام نفس الأسلوب الذي يقوم به React-Redux ما

يحتوي React-Router-Redux على بعض الطرق المتاحة التي تسمح بالتنقل البسيط من منشئي العمل الداخليين. يمكن أن يكون هذا مفيدًا بشكل خاص للأشخاص الذين لديهم بنية قائمة في React Native ، ويرغبون في استخدام نفس الأنماط في React Web مع الحد الأدنى للنفقات الأساسية.

استكشف الطرق التالية:

  • push(location)
  • replace(location)
  • go(number)
  • goBack()
  • goForward()

هنا مثال على الاستخدام ، مع Redux-Thunk :

./actioncreators.js

import { goBack } from 'react-router-redux'

export const onBackPress = () => (dispatch) => dispatch(goBack())

./viewcomponent.js

<button
  disabled={submitting}
  className="cancel_button"
  onClick={(e) => {
    e.preventDefault()
    this.props.onBackPress()
  }}
>
  CANCEL
</button>

React Router v4

مع الإصدار 4 من React Router ، هناك ثلاثة طرق يمكنك اتباعها للتوجيه البرمجي داخل المكونات.

  1. استخدم مع withRouter الأعلى من الترتيب.
  2. استخدم التكوين وقم بعرض <Route>
  3. استخدم context .

React Router هو في الغالب غلاف حول مكتبة history . history يعالج التفاعل مع window.history المتصفح بالنسبة لك مع تاريخ المستعرض والتاريخ. كما يوفر أيضًا محفوظات ذاكرة مفيدة للبيئات التي لا تحتوي على محفوظات عمومية. هذا مفيد بشكل خاص في تطوير تطبيقات الجوال ( react-native ) واختبار الوحدة مع عقدة.

لدى مثيل محفوظ طريقتين للتنقل: push replace . إذا كنت تفكر في history كمجموعة من المواقع التي تمت زيارتها ، push موقعًا جديدًا إلى الصفيف replace استبدال الموقع الحالي في الصفيف الجديد. عادةً ما ستحتاج إلى استخدام طريقة push أثناء التنقل.

في الإصدارات السابقة من React Router ، كان عليك إنشاء مثيل history خاص بك ، ولكن في v4 <BrowserRouter> و <HashRouter> و <MemoryRouter> بإنشاء مثيلات المتصفح <MemoryRouter> والذاكرة نيابة عنك. يجعل React Router خصائص وأساليب مثيل history المرتبطة بالموجه الخاص بك متاحة من خلال السياق ، تحت كائن router .

1. استخدم withRouter الأعلى من الترتيب

withRouter الأعلى من الترتيب مع كائن history كدعم للمكون. هذا يسمح لك بالوصول إلى push replace الأساليب دون الحاجة إلى التعامل مع context .

import { withRouter } from 'react-router-dom'
// this also works with react-router-native

const Button = withRouter(({ history }) => (
  <button
    type='button'
    onClick={() => { history.push('/new-location') }}
  >
    Click Me!
  </button>
))

2. استخدم التكوين وعرض <Route>

لا يعد المكون <Route> للمواقع المتطابقة فقط. يمكنك عرض مسار بلا مسار وسيتطابق دائمًا مع الموقع الحالي . يمر المكون <Route> بنفس الدعائم كما هو withRouter مع withRouter ، لذلك ستتمكن من الوصول إلى طرق history خلال دعم history .

import { Route } from 'react-router-dom'

const Button = () => (
  <Route render={({ history}) => (
    <button
      type='button'
      onClick={() => { history.push('/new-location') }}
    >
      Click Me!
    </button>
  )} />
)

3. استخدم السياق *

* ولكن ربما لا ينبغي لك

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

const Button = (props, context) => (
  <button
    type='button'
    onClick={() => {
      // context.history.push === history.push
      context.history.push('/new-location')
    }}
  >
    Click Me!
  </button>
)

// you need to specify the context type so that it
// is available within the component
Button.contextTypes = {
  history: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired
  })
}

1 و 2 هما أبسط الخيارات لتنفيذ ، لذلك بالنسبة لمعظم حالات الاستخدام فهي أفضل رهاناتك.


إذا كنت تستخدم تاريخ التجزئة أو المتصفح ، فيمكنك القيام بذلك

hashHistory.push('/login');
browserHistory.push('/login');

React-Router V4

إذا كنت تستخدم الإصدار 4 ، فيمكنك استخدام مكتبتي (قابس بلا شفقة) حيث يمكنك ببساطة إرسال عمل وكل شيء يعمل فقط!

dispatch(navigateTo("/aboutUs"));

https://www.npmjs.com/package/trippler


في React -Router v4 و ES6

يمكنك استخدام withRouter و this.props.history.push .

import {withRouter} from 'react-router-dom';

class Home extends Component {

    componentDidMount() {
        this.props.history.push('/redirect-to');
    }
}

export default withRouter(Home);

يجب تجنب forceUpdate لأنه ينحرف عن عقلية React. تستشهد مستندات forceUpdate مثالاً على متى يمكن استخدام forceUpdate :

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

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

عادة يجب أن تحاول تجنب جميع استخدامات forceUpdate () وقراءة فقط من هذا .props و this.state في التقديم (). هذا يجعل المكون الخاص بك "خالص" والتطبيق الخاص بك أبسط بكثير وأكثر كفاءة. https://facebook.github.io/react/docs/component-api.html#forceupdate

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

<Element key={this.state.key} /> 

ثم يحدث تغيير وإعادة تعيين المفتاح

this.setState({ key: Math.random() });

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

في حين أن الجواب الحقيقي على سؤال OP سيكون forceUpdate() لقد وجدت هذا الحل مفيد في حالات مختلفة. أود أيضًا أن أشير إلى أنك إذا وجدت نفسك تستخدم forceUpdate فقد ترغب في مراجعة شفرتك ومعرفة ما إذا كانت هناك طريقة أخرى للقيام بالأشياء.





reactjs react-router