[reactjs] التنقل برمجيا باستخدام جهاز التوجيه رد فعل


10 Answers

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>
Question

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

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

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

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




قد لا يكون النهج الأفضل ولكن ... باستخدام 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')
);




تحذير: يغطي هذا الجواب فقط إصدارات 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




It depends on where to you want to redirect. If it's inside a component, then @Paul S answer is the best way to do it.

But if you want to redirect from anywhere else inside the app, I recommend to use React-Router-Redux




React-Router V4

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

dispatch(navigateTo("/aboutUs"));

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




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>;
    }
}



فيما يلي كيفية القيام بذلك مع 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
}



في 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);



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

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



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

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"




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




Related