প্রতিক্রিয়া রাউটার v4 এ কীভাবে ইতিহাসে চাপ দেওয়া যায়?

360

প্রতিক্রিয়া রাউটার (v3) এর বর্তমান সংস্করণে আমি একটি সার্ভার প্রতিক্রিয়া গ্রহণ করতে পারি এবং browserHistory.pushউপযুক্ত প্রতিক্রিয়া পৃষ্ঠায় যেতে পারি। তবে এটি ভি 4 এ পাওয়া যায় না এবং এটি হ্যান্ডেল করার উপযুক্ত উপায়টি কী তা আমি নিশ্চিত নই।

এই উদাহরণে, Redux ব্যবহার করে, উপাদান / অ্যাপ-প্রোডাক্ট-form.js কল করে this.props.addProduct(props)যখন কোনও ব্যবহারকারী ফর্মটি জমা দেয়। সার্ভারটি যখন সাফল্য দেয়, ব্যবহারকারীকে কার্ট পৃষ্ঠাতে নেওয়া হয়।

// actions/index.js
export function addProduct(props) {
  return dispatch =>
    axios.post(`${ROOT_URL}/cart`, props, config)
      .then(response => {
        dispatch({ type: types.AUTH_USER });
        localStorage.setItem('token', response.data.token);
        browserHistory.push('/cart'); // no longer in React Router V4
      });
}

আমি কীভাবে প্রতিক্রিয়া রাউটার ভি 4 এর ফাংশন থেকে কার্ট পৃষ্ঠায় পুনর্নির্দেশ করতে পারি?

reactjs  react-router  react-router-v4 
— ক্রিস
সূত্র
কেবলমাত্র দেওয়া শেষ সমাধান থেকে এবং গিটহাবের রিঅ্যাক্ট রাউটারের সমস্যাগুলির পরামর্শগুলি থেকে যুক্ত করার contextজন্য , আপনার যা প্রয়োজন ম্যানুয়ালি প্রয়োজন তা পাস করার জন্য এটি "নো গো" নয়। আমি গ্রন্থাগারের লেখক না হলে এটি ব্যবহার করার দরকার নেই। আসলে ফেসবুক এর বিপরীতে সুপারিশ করে।
— ক্রিস
@ ক্রিস আপনি কি এর সমাধান খুঁজে পেয়েছেন? আপনার এখানে যেমন ব্যাখ্যা করেছেন ঠিক তেমন কাজ করার জন্য আমার একটি আলাদা উপাদানকে চাপ দেওয়া দরকার
— মিঃজি
@ মিঃ জি, দুঃখের বিষয় আমার কাছে নেই। সর্বশেষ আমি পড়েছি প্রতিক্রিয়া প্রশিক্ষণ দলটি যা রক্ষণাবেক্ষণ করে তা রক্ষণের একটি রিডাক্স প্যাকেজ উপলব্ধ। এটিকে কার্যকর করার জন্য আমার কোনও ভাগ্য হয়নি, এবং তারা এটিকে সমাধানে খুব বেশি কাজ করেননি।
— ক্রিস
কেন আমরা উইন্ডোজ.লোকেশন। হিফ = ইউআরএল ব্যবহার করতে পারি না? ইউআরএল পরিবর্তন করতে এবং পুনঃনির্দেশ করতে এটি ব্যবহার করে কিছু ভুল আছে?
— শান
আমি কেন তা দেখতে পাচ্ছি না তবে ব্যবহারের বিকল্পটি historyপ্রতিক্রিয়া নেটিভকে বিকল্প হিসাবে পাশাপাশি উত্তরাধিকারী ব্রাউজারগুলিকে সমর্থন করার একটি অতিরিক্ত বিকল্প হিসাবে কাজ করে।
— ক্রিস

উত্তর:

308

আপনি historyআপনার উপাদানগুলির বাইরে পদ্ধতিগুলি ব্যবহার করতে পারেন । নিম্নলিখিত উপায় দ্বারা চেষ্টা করুন।

প্রথমে ইতিহাসের প্যাকেজটিhistory ব্যবহৃত একটি সামগ্রী তৈরি করুন :

// src/history.js

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

তারপরে এটি মোড়ানো <Router>( দয়া করে মনে রাখবেন , এর import { Router }পরিবর্তে আপনার ব্যবহার করা উচিত import { BrowserRouter as Router }):

// src/index.jsx

// ...
import { Router, Route, Link } from 'react-router-dom';
import history from './history';

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/login">Login</Link></li>
        </ul>
        <Route exact path="/" component={HomePage} />
        <Route path="/login" component={LoginPage} />
      </div>
    </Router>
  </Provider>,
  document.getElementById('root'),
);

যে কোনও জায়গা থেকে আপনার বর্তমান অবস্থান পরিবর্তন করুন, উদাহরণস্বরূপ:

// src/actions/userActionCreators.js

// ...
import history from '../history';

export function login(credentials) {
  return function (dispatch) {
    return loginRemotely(credentials)
      .then((response) => {
        // ...
        history.push('/');
      });
  };
}

UPD : এছাড়াও আপনি একটি সামান্য ভিন্ন উদাহরণে দেখতে পারেন রাউটার প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী প্রতিক্রিয়া ।

— ওলেগ বেলোস্টটস্কি
সূত্র
24
@ ওলেগবেলোস্টটস্কি যা বলেছিলেন ঠিক তেমন করার চেষ্টা করেছি, কিন্তু পরে history.push('some path')ইউআরএল পরিবর্তন হয় তবে পৃষ্ঠাটি পরিবর্তন হয় না। আমাকে window.location.reload()এটিকে কাজ করার জন্য আমার কোডের কিছু অংশে রেখে দিতে হবে। তবে, একটি দৃষ্টান্তে আমাকে হ্রাস রেকর্ড রাষ্ট্রের গাছ রাখতে হবে এবং পুনরায় লোড করা এটি ধ্বংস করে। অন্য কোন সমাধান?
— sdabrutas
2
@idunno withRouterউচ্চতর অর্ডার উপাদান ব্যবহার করার চেষ্টা করুন ।
— ওলেগ বেলোস্টসস্কি
এটি আমাকে উল্লেখ করে একটি ত্রুটি ছুঁড়ে ফেলেছে: createBrowserHistory কোনও ফাংশন নয়। আমি কি করতে পারি?
— একেজে
@AKJ হয়তো import createHistory from 'history/createBrowserHistory'; export default createHistory();কাজ হবে।
— ওলেগ বেলোস্টটস্কি
1
ডাউনভোট :) এর জন্য দুঃখিত এটিরও কাজ করা উচিত, ক্রিস এই উত্তরটি দেওয়ার সঠিক উপায়: stackoverflow.com/a/42716055/491075 ।
— gion_13
340

প্রতিক্রিয়া রাউটার ভি 4 মূলত ভি 3 (এবং পূর্বের) থেকে আলাদা এবং আপনি browserHistory.push()যেমন ব্যবহার করতে পারেন তেমন করতে পারবেন না ।

আপনি আরও তথ্য চাইলে এই আলোচনাটি সম্পর্কিত বলে মনে হচ্ছে:

  • একটি নতুন তৈরি করা browserHistoryকাজ করবে না কারণ <BrowserRouter>এটি একটি নিজস্ব ইতিহাস উদাহরণ তৈরি করে এবং এর পরিবর্তনের জন্য শোনো। সুতরাং অন্য কোনও উদাহরণ ইউআরএল পরিবর্তন করবে তবে আপডেটটি করবে না <BrowserRouter>।
  • browserHistory কেবলমাত্র v2-এ, ভি 4-তে প্রতিক্রিয়া-রাউটার দ্বারা প্রকাশিত হয় না।

পরিবর্তে আপনার কাছে এটি করার কয়েকটি বিকল্প রয়েছে:

  • withRouterউচ্চ-অর্ডার উপাদান ব্যবহার করুন

    পরিবর্তে আপনার withRouterহাই অর্ডার উপাদান ব্যবহার করা উচিত , এবং ইতিহাসে এগিয়ে যাবে এমন উপাদানটিতে এটি মোড়ানো উচিত । উদাহরণ স্বরূপ:

    import React from "react";
import { withRouter } from "react-router-dom";

class MyComponent extends React.Component {
  ...
  myFunction() {
    this.props.history.push("/some/Path");
  }
  ...
}
export default withRouter(MyComponent);

    পরীক্ষা করে দেখুন কর্মকর্তা ডকুমেন্টেশন আরও তথ্যের জন্য:

    আপনি অ্যাক্সেস পেতে পারেন historyএবং কাছের বস্তুর বৈশিষ্ট্যাবলী <Route>'s matchwithRouter উচ্চতর-অর্ডার উপাদান মাধ্যমে। withRouter তার উপাদান প্রত্যেক সময় রুট একই সাজসরঞ্জাম সাথে পরিবর্তনগুলি পুনরায় রেন্ডার হবে <Route>সাজসরঞ্জাম রেন্ডার: { match, location, history }।

  • contextএপিআই ব্যবহার করুন

    প্রসঙ্গটি ব্যবহার করা সহজ সমাধানগুলির মধ্যে একটি হতে পারে, তবে একটি পরীক্ষামূলক এপিআই হওয়ায় এটি অস্থির এবং অসমর্থিত। কেবল তখনই ব্যবহার করুন যখন সমস্ত কিছু ব্যর্থ হয়। এখানে একটি উদাহরণ: 

    import React from "react";
import PropTypes from "prop-types";

class MyComponent extends React.Component {
  static contextTypes = {
    router: PropTypes.object
  }
  constructor(props, context) {
     super(props, context);
  }
  ...
  myFunction() {
    this.context.router.history.push("/some/Path");
  }
  ...
}

    প্রসঙ্গে সরকারী ডকুমেন্টেশনটি দেখুন :

    আপনি যদি নিজের আবেদনটি স্থিতিশীল রাখতে চান তবে প্রসঙ্গটি ব্যবহার করবেন না। এটি একটি পরীক্ষামূলক এপিআই এবং এটি ভবিষ্যতে প্রতিক্রিয়া প্রকাশের বিরতিতে পারে।

    যদি আপনি এই সতর্কতা থাকা সত্ত্বেও প্রসঙ্গ ব্যবহারের জন্য জোর দিয়ে থাকেন, তবে আপনার প্রসঙ্গের ব্যবহারকে একটি ছোট্ট অঞ্চলে পৃথক করার চেষ্টা করুন এবং সম্ভব হলে প্রসঙ্গ API সরাসরি ব্যবহার এড়িয়ে চলুন যাতে এপিআই পরিবর্তিত হলে আপগ্রেড করা সহজ হয়।

— ক্রিস
সূত্র
9
হ্যাঁ আমি চেষ্টা করেছিলাম। জিজ্ঞাসা করার জন্য ধন্যবাদ. :-) সুতরাং আপনি এই ক্রিয়া ফাংশনে প্রসঙ্গটি কীভাবে পাবেন? এখনও অবধি এটি অপরিজ্ঞাত হিসাবে উঠে আসছে।
— ক্রিস
1
আমি এখন কয়েক দিন ধরে এই বিষয়টি নিয়ে গবেষণা করে চলেছি এবং এটি কাজ করতে সক্ষম হতে পারিনি। এমনকি উপরের উদাহরণটি ব্যবহার করে আমি রাউটার পেতে থাকি তা প্রসঙ্গে অপরিজ্ঞাত। আমি বর্তমানে প্রতিক্রিয়া v15.5.10, প্রতিক্রিয়া-রাউটার-ডোম ভি 4.1.1, প্রোপ-প্রকার 15.5.10 ব্যবহার করছি। এর চারপাশের ডকুমেন্টেশনগুলি খুব কম এবং খুব পরিষ্কার নয়।
— স্টু
5
@ এসটিউ এটির কাজ করা উচিতthis.context.router.history.push('/path');
— তুষার
1
@ ক্রিস প্রকৃতপক্ষে, আপনি যদি ইতিহাসের অবজেক্টটি ইনস্ট্যান্ট করার চেষ্টা করেন এবং এটি নিজে ব্যবহার করেন তবে এটি ইউআরএল পরিবর্তন করবে তবে উপাদানটি রেন্ডার করবে না - যেমন আপনি উপরে উল্লেখ করেছেন mentioned তবে, কীভাবে উপাদানটির বাইরে "ইতিহাস.push" ব্যবহার করবেন এবং উপাদানটিকে রেন্ডার করতে বাধ্য করবেন?
— শীতল
52
এটি কীভাবে ইতিহাস অ্যাক্সেস করবেন তা জিজ্ঞাসা করা প্রশ্নের প্রশ্নের উত্তর দেয় না a কোন উপাদানটির বাইরে থাকা। উইথ রউটার বা প্রসঙ্গটি ব্যবহার করা কোনও উপাদানগুলির বাইরে থাকার ক্ষেত্রে বিকল্প নয়।
— সানশাইনডোয়েল
49

এখন রিঅ্যাক্ট-রাউটার ভি 5 এর সাহায্যে আপনি এইভাবে হিস্টরি লাইফেসাইকেল হুকটি ব্যবহার করতে পারেন:

import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

এখানে আরও পড়ুন: https://reacttraining.com/react-router/web/api/Hooks/usehistory

— হাদি আবু
সূত্র
1
এটি একটি খুব স্বাগত আপডেট! ধন্যবাদ!
— ক্রিস
এটি সেট আপ করার জন্য আমার কি কোনও নির্দিষ্ট উপায় আছে, আমি নিম্নলিখিতটি কল করছি let history = useHistory();তবে একটি Object is not callableত্রুটি পেয়েছি, যখন আমি ব্যবহারের ইতিহাসটি কী console.log(useHistory)তা দেখার চেষ্টা করেছিলাম এটি অপরিজ্ঞাত হিসাবে প্রদর্শিত হয়েছে। ব্যবহার"react-router-dom": "^5.0.1"
— স্টিফ_বিডি
@ স্টিফ_বিডিএইচটি আপনি আপনার প্যাকেজ.জেসন ফাইলে আপডেট করতে হবে "রিয়েট-রাউটার-ডোম": "^ 5.0.1" এবং 'এনপিএম ইনস্টল' চালানোর জন্য
— হাদি আবু
2
দুর্দান্ত, তবে হুড রিডেক্স অ্যাকশন ক্লাসগুলির অভ্যন্তরে / ফাংশনটির প্রতিক্রিয়া না করায় তারা ব্যবহার করতে পারে না
— জে
লগইন করার সময় আপনি এটিকে পুনর্নির্দেশের জন্য কীভাবে ব্যবহার করবেন (async)। এখানে প্রশ্ন => এর stackoverflow.com/questions/62154408/...
— theairbend3r
29

প্রতিক্রিয়া রাউটার 4 এর সহজতম উপায়টি ব্যবহার করা 

this.props.history.push('/new/url');

তবে এই পদ্ধতিটি ব্যবহার করতে, আপনার বিদ্যমান উপাদানটির historyঅবজেক্টে অ্যাক্সেস থাকা উচিত । এর মাধ্যমে আমরা অ্যাক্সেস পেতে পারি

  1. যদি আপনার উপাদানটি Routeসরাসরি লিঙ্কযুক্ত থাকে তবে আপনার উপাদানটির ইতিমধ্যে historyঅবজেক্টে অ্যাক্সেস রয়েছে ।

    উদাহরণ:

    <Route path="/profile" component={ViewProfile}/>

    এখানে ViewProfileঅ্যাক্সেস আছে history।

  2. Routeসরাসরি সংযুক্ত না হলে ।

    উদাহরণ:

    <Route path="/users" render={() => <ViewUsers/>}

    তারপরে আমাদের ব্যবহার করতে হবে withRouter, বিদ্যমান উপাদানটি মোটা করার জন্য একটি হিগারের অর্ডার ফ্যাকশন।

    ভিতরে ViewUsers উপাদান

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

    • export default withRouter(ViewUsers);

    এটি এখন, আপনার ViewUsersউপাদান historyঅবজেক্টে অ্যাক্সেস রয়েছে ।

হালনাগাদ

2- এই দৃশ্যে, সমস্ত propsউপাদান আপনার উপাদানটিতে প্রবেশ করুন এবং তারপরে আমরা this.props.historyকোনওটি ছাড়াইও উপাদানটি থেকে অ্যাক্সেস করতে পারিHOC

উদাহরণ:

<Route path="/users" render={props => <ViewUsers {...props} />}
— সহিথ্যান বিগনেশ্বরন
সূত্র
1
অসাধারণ! আপনার দ্বিতীয় পদ্ধতিটিও আমার জন্য কৌশলটি করেছিল, কারণ আমার উপাদানটি (যার অ্যাক্সেস প্রয়োজন this.props.history) এইচওসি থেকে আসে, যার অর্থ এটি আপনি সরাসরি Routeব্যাখ্যা করেছেন বলে এটির সাথে সরাসরি লিঙ্কযুক্ত নয় ।
— সিজউভিন
25

এটি আমি এটি করেছিলাম:

import React, {Component} from 'react';

export default class Link extends Component {
    constructor(props) {
        super(props);
        this.onLogout = this.onLogout.bind(this);
    }
    onLogout() {
        this.props.history.push('/');
    }
    render() {
        return (
            <div>
                <h1>Your Links</h1>
                <button onClick={this.onLogout}>Logout</button>
            </div>
        );
    }
}

this.props.history.push('/cart');কার্ট পৃষ্ঠায় পুনর্নির্দেশ করতে ব্যবহার করুন এটি ইতিহাসের অবজেক্টে সংরক্ষণ করা হবে।

উপভোগ করুন, মাইকেল

— মাইকেল হোরোজানস্কি
সূত্র
2
হ্যাঁ, এটি উপাদানগুলির মধ্যে দেখে মনে হচ্ছে আপনি ঠিক জরিমানা করতে পারেন। কোনও উপাদানগুলির বাইরে নেভিগেট প্রভাবিত করার একমাত্র উপায় হ'ল পুনঃনির্দেশ with
— ক্রিস
14
এটি কীভাবে ইতিহাস অ্যাক্সেস করবেন তা জিজ্ঞাসা করা প্রশ্নের প্রশ্নের উত্তর দেয় না a কোন উপাদানটির বাইরে থাকা। এই উপাদানগুলির বাইরে থাকা জন্য এই.প্রোপস। হিস্টরি ব্যবহার করা কোনও বিকল্প নয়।
— সানশাইনডোয়েল
22

প্রতিক্রিয়া রাউটার ভি 4 ডকুমেন্টেশন অনুসারে - রেডাক্স ডিপ ইন্টিগ্রেশন সেশন

গভীর সংহতকরণ প্রয়োজন:

"ক্রিয়া প্রেরণের মাধ্যমে নেভিগেট করতে সক্ষম হোন"

তবে, তারা "গভীর সংহতকরণ" এর বিকল্প হিসাবে এই পদ্ধতির প্রস্তাব দেয়:

"নেভিগেট করার জন্য ক্রিয়াগুলি প্রেরণের পরিবর্তে আপনি আপনার ক্রিয়ায় উপাদানগুলিকে রুট করার জন্য সরবরাহ করা ইতিহাসের বস্তুটি পাস করতে পারেন এবং এটিতে এটিতে নেভিগেট করতে পারেন।"

সুতরাং আপনি উইটার রউটার হাই অর্ডার উপাদান দিয়ে আপনার উপাদানটি মোড়ানো করতে পারেন:

export default withRouter(connect(null, { actionCreatorName })(ReactComponent));

যা ইতিহাসের এপিআই প্রপসগুলিতে পাস করবে। সুতরাং আপনি অ্যাকশন নির্মাতাকে ইতিহাসকে পরম হিসাবে পাস করার জন্য কল করতে পারেন। উদাহরণস্বরূপ, আপনার রিঅ্যাক্ট কম্পোনেন্টের ভিতরে:

onClick={() => {
  this.props.actionCreatorName(
    this.props.history,
    otherParams
  );
}}

তারপরে, আপনার ক্রিয়াগুলি / index.js এর ভিতরে:

export function actionCreatorName(history, param) {
  return dispatch => {
    dispatch({
      type: SOME_ACTION,
      payload: param.data
    });
    history.push("/path");
  };
}
— alainbex
সূত্র
19

অদ্ভুত প্রশ্ন, আমাকে বেশ সময় নিয়েছিল, কিন্তু শেষ পর্যন্ত, আমি এটি এইভাবে সমাধান করেছি:

আপনার ধারকটি মোড়ানো withRouterএবং mapDispatchToPropsকার্যক্রমে আপনার ক্রিয়ায় ইতিহাস পাস করুন । অ্যাকশনে নেভিগেট করতে হিস্টরি.পশ ('/ url') ব্যবহার করুন।

কর্ম:

export function saveData(history, data) {
  fetch.post('/save', data)
     .then((response) => {
       ...
       history.push('/url');
     })
};

ধারক: 

import { withRouter } from 'react-router-dom';
...
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    save: (data) => dispatch(saveData(ownProps.history, data))}
};
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Container));

এটি প্রতিক্রিয়া রাউটার v4.x এর জন্য বৈধ ।

— খ্রিস্ট্যনা স্কওয়ারোক
সূত্র
ধন্যবাদ, আপনার উইথ রউটার সলিউশন টাইপস্ক্রিপ্টের সাথে কাজ করে তবে আগের import { createBrowserHistory } from 'history' কোনও ধারণার তুলনায় এটি বেশ ধীর ?
— জে
7

this.context.history.push কাজ করবে না.

আমি এইভাবে কাজ করার জন্য ধাক্কা পেতে পরিচালিত:

static contextTypes = {
    router: PropTypes.object
}

handleSubmit(e) {
    e.preventDefault();

    if (this.props.auth.success) {
        this.context.router.history.push("/some/Path")
    }

}
— Aimar
সূত্র
9
এটি কীভাবে ইতিহাস অ্যাক্সেস করবেন তা জিজ্ঞাসা করা প্রশ্নের প্রশ্নের উত্তর দেয় না a কোন উপাদানটির বাইরে থাকা। এই উপাদানটির বাইরে থাকা অবস্থায় এই কোডটিেক্সট ব্যবহার করা কোনও বিকল্প নয়।
— সানশাইনডোয়েল
6

এক্ষেত্রে আপনি আপনার কান্ডের কাছে প্রপস দিচ্ছেন। সুতরাং আপনি কেবল কল করতে পারেন

props.history.push('/cart')

যদি এটি না হয় তবে আপনি এখনও আপনার উপাদান থেকে ইতিহাস পাস করতে পারেন 

export function addProduct(data, history) {
  return dispatch => {
    axios.post('/url', data).then((response) => {
      dispatch({ type: types.AUTH_USER })
      history.push('/cart')
    })
  }
}
— user3812377
সূত্র
6

এটি অন্য কারও পক্ষে উপযোগী হলে আমি আরও একটি সমাধান অফার করি।

আমার একটি history.jsফাইল রয়েছে যেখানে আমার নিম্নলিখিতগুলি রয়েছে:

import createHistory from 'history/createBrowserHistory'
const history = createHistory()
history.pushLater = (...args) => setImmediate(() => history.push(...args))
export default history

এর পরে, আমার রুটে যেখানে আমি আমার রাউটারটি সংজ্ঞায়িত করি আমি নিম্নলিখিতটি ব্যবহার করি:

import history from '../history'
import { Provider } from 'react-redux'
import { Router, Route, Switch } from 'react-router-dom'

export default class Root extends React.Component {
  render() {
    return (
     <Provider store={store}>
      <Router history={history}>
       <Switch>
        ...
       </Switch>
      </Router>
     </Provider>
    )
   }
  }

শেষ পর্যন্ত, actions.jsআমি ইতিহাস আমদানি করি এবং পুশলটার ব্যবহার করি

import history from './history'
export const login = createAction(
...
history.pushLater({ pathname: PATH_REDIRECT_LOGIN })
...)

এইভাবে, আমি এপিআই কলগুলির পরে নতুন ক্রিয়াকলাপে ধাক্কা দিতে পারি।

আশা করি এটা সাহায্য করবে!

— দিয়েগো
সূত্র
4

আপনি যদি রেডাক্স ব্যবহার করেন তবে আমি এনপিএম প্যাকেজ রিঅ্যাক্ট -রাউটার- রিডেক্স ব্যবহার করার পরামর্শ দেব । এটি আপনাকে রেডাক্স স্টোর নেভিগেশন ক্রিয়া প্রেরণের অনুমতি দেয়।

তাদের রেডমি ফাইলে বর্ণিত হিসাবে আপনাকে স্টোর তৈরি করতে হবে ।

সবচেয়ে সহজ ব্যবহারের কেস:

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

this.props.dispatch(push('/second page'));

ধারক / উপাদান সহ দ্বিতীয় ব্যবহারের ক্ষেত্রে:

ধারক:

import { connect } from 'react-redux';
import { push } from 'react-router-redux';

import Form from '../components/Form';

const mapDispatchToProps = dispatch => ({
  changeUrl: url => dispatch(push(url)),
});

export default connect(null, mapDispatchToProps)(Form);

উপাদান:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class Form extends Component {
  handleClick = () => {
    this.props.changeUrl('/secondPage');
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}/>
      </div>Readme file
    );
  }
}
— কালো
সূত্র
1
আপনি যদি সংস্করণটি ব্যবহার না করেন তবে এটি এই মুহূর্তে এখনও বিকাশের অধীনে থাকা প্রতিক্রিয়া-রাউটার-রিডেক্সের সাথে কাজ করে নাnext !
— ব্যাঙচক্র
4

আমি এটি ব্যবহার করে এটি সম্পাদন করতে সক্ষম হয়েছি bind()। আমি একটি বোতামে ক্লিক index.jsxকরতে, সার্ভারে কিছু ডেটা পোস্ট করতে, প্রতিক্রিয়াটি মূল্যায়ন করতে এবং এতে পুনঃনির্দেশ করতে চেয়েছিলাম success.jsx। আমি কীভাবে এটি কাজ করেছিলাম তা এখানে ...

index.jsx:

import React, { Component } from "react"
import { postData } from "../../scripts/request"

class Main extends Component {
    constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this)
        this.postData = postData.bind(this)
    }

    handleClick() {
        const data = {
            "first_name": "Test",
            "last_name": "Guy",
            "email": "test@test.com"
        }

        this.postData("person", data)
    }

    render() {
        return (
            <div className="Main">
                <button onClick={this.handleClick}>Test Post</button>
            </div>
        )
    }
}

export default Main

request.js:

import { post } from "./fetch"

export const postData = function(url, data) {
    // post is a fetch() in another script...
    post(url, data)
        .then((result) => {
            if (result.status === "ok") {
                this.props.history.push("/success")
            }
        })
}

success.jsx:

import React from "react"

const Success = () => {
    return (
        <div className="Success">
            Hey cool, got it.
        </div>
    )
}

export default Success

সুতরাং বাঁধাই দ্বারা thisকরা postDataমধ্যে index.jsx, আমি অ্যাক্সেস করতে সক্ষম ছিল this.props.historyমধ্যে request.js... তারপর আমি বিভিন্ন উপাদানের মধ্যে এই ফাংশন পুনরায় ব্যবহার করতে পারেন, শুধু নিশ্চিত আমি অন্তর্ভুক্ত করতে ভুলবেন না করতে হবে this.postData = postData.bind(this)সালে constructor()।

— skwidbreth
সূত্র
3

এখানে আমার হ্যাক (এটি আমার রুট-স্তরের ফাইল, এতে সামান্য রিডেক্স মিশ্রিত রয়েছে - যদিও আমি ব্যবহার করছি না react-router-redux):

const store = configureStore()
const customHistory = createBrowserHistory({
  basename: config.urlBasename || ''
})

ReactDOM.render(
  <Provider store={store}>
    <Router history={customHistory}>
      <Route component={({history}) => {
        window.appHistory = history
        return (
          <App />
        )
      }}/>
    </Router>
  </Provider>,
  document.getElementById('root')
)

তারপরে window.appHistory.push()আমি যেখানেই চাই সেখানে ব্যবহার করতে পারি (উদাহরণস্বরূপ, আমার রিডেক্স স্টোর ফাংশন / থঙ্কস / সাগাস ইত্যাদিতে) আমি আশা করছিলাম যে আমি কেবল ব্যবহার করতে পারব window.customHistory.push()তবে কোনও কারণে react-routerইউআরএল পরিবর্তিত হলেও আপডেট হবে বলে মনে হয় নি। তবে এইভাবে আমার কাছে হুবহু উদাহরণ রয়েছে react-router। আমি বিশ্বব্যাপী স্টাফগুলিতে জিনিসপত্র স্থাপন করা পছন্দ করি না এবং আমি যে কয়েকটি জিনিস দিয়ে এটি করব তা হ'ল এটি। তবে আমি আইএমও দেখেছি এমন কোনও বিকল্পের চেয়ে এটি ভাল।

— জোয়াও
সূত্র
3

কলব্যাক ব্যবহার করুন। এটা আমার জন্য কাজ!

export function addProduct(props, callback) {
  return dispatch =>
    axios.post(`${ROOT_URL}/cart`, props, config)
    .then(response => {
    dispatch({ type: types.AUTH_USER });
    localStorage.setItem('token', response.data.token);
    callback();
  });
}

উপাদানগুলিতে, আপনাকে কেবল কলব্যাক যোগ করতে হবে

this.props.addProduct(props, () => this.props.history.push('/cart'))
— প্রিয়ংশ রাস্তোগি
সূত্র
3

আমি যেভাবে এটি করি তা হ'ল: - ব্যবহার করে পুনর্নির্দেশের পরিবর্তে history.push, আমি কেবলমাত্র Redirectউপাদানটি ব্যবহার করি react-router-dom যখন এই উপাদানটি ব্যবহার করার সময় আপনি কেবল পাস করতে পারেন push=true, এবং এটি বাকিটির যত্ন নেবে

import * as React from 'react';
import { Redirect } from 'react-router-dom';
class Example extends React.Component {
  componentDidMount() {
    this.setState({
      redirectTo: '/test/path'
    });
  }

  render() {
    const { redirectTo } = this.state;

    return <Redirect to={{pathname: redirectTo}} push={true}/>
  }
}
— LuizAsFight
সূত্র
এটি সঠিক যা প্রতিক্রিয়া রেন্ডার চক্রটিকে ভঙ্গ করে না
— jzqa
1

প্রতিক্রিয়া রাউটার ভি 4 এখন নীচে হিসাবে ইতিহাসের প্রপ ব্যবহার করার অনুমতি দেয়:

this.props.history.push("/dummy",value)

তত্ক্ষণাত state:{value}রাষ্ট্রের উপাদান হিসাবে প্রপস উপলব্ধ থাকে সেখানে মানটি অ্যাক্সেস করা যায় ।

— Snivio
সূত্র
1
এটি কীভাবে ইতিহাস অ্যাক্সেস করবেন তা জিজ্ঞাসা করা প্রশ্নের প্রশ্নের উত্তর দেয় না a কোন উপাদানটির বাইরে থাকা। এই উপাদানগুলির বাইরে থাকা জন্য এই.প্রোপস। হিস্টরি ব্যবহার করা কোনও বিকল্প নয়।
— আরকাদি
0

লগইন এবং বিভিন্ন জিনিস চালানোর জন্য আমি এটি করার মতো করে আপনি এটি ব্যবহার করতে পারেন 

class Login extends Component {
  constructor(props){
    super(props);
    this.login=this.login.bind(this)
  }


  login(){
this.props.history.push('/dashboard');
  }


render() {

    return (

   <div>
    <button onClick={this.login}>login</login>
    </div>

)
— jadlmir
সূত্র
0 
/*Step 1*/
myFunction(){  this.props.history.push("/home"); }
/**/
 <button onClick={()=>this.myFunction()} className={'btn btn-primary'}>Go 
 Home</button>
— ডেভিড বাগদাসারায়ণ
সূত্র
কোনও আমদানির দরকার নেই!
— ডেভিড বাগদাসারায়ান
1
এই কোডটি প্রশ্নের উত্তর দিতে পারে, কেন এবং / অথবা এই কোডটির প্রশ্নের উত্তর কীভাবে তার দীর্ঘমেয়াদী মানকে উন্নত করে সে সম্পর্কে অতিরিক্ত প্রসঙ্গ সরবরাহ করে।
— রোলস্টুহফলাহার
0

এক ধাপে রাউটারে আপনার অ্যাপ্লিকেশন মোড়ক করুন

import { BrowserRouter as Router } from "react-router-dom";
ReactDOM.render(<Router><App /></Router>, document.getElementById('root'));

এখন আমার পুরো অ্যাপটিতে ব্রাউজাররউটারে অ্যাক্সেস থাকবে। দ্বিতীয় ধাপে আমি রুট আমদানি করি এবং তারপরে সেই প্রপসগুলি পাস করি। সম্ভবত আপনার মূল ফাইলগুলির মধ্যে একটিতে।

import { Route } from "react-router-dom";

//lots of code here

//somewhere in my render function

    <Route
      exact
      path="/" //put what your file path is here
      render={props => (
      <div>
        <NameOfComponent
          {...props} //this will pass down your match, history, location objects
        />
      </div>
      )}
    />

এখন যদি আমি আমার উপাদান জেএস ফাইলটিতে কনসোল.লগ (এটি.প্রপস) চালিত করি তবে আমার এমন কিছু পাওয়া উচিত যা দেখতে দেখতে এমন দেখাবে

{match: {…}, location: {…}, history: {…}, //other stuff }

পদক্ষেপ 2 আমি আমার অবস্থান পরিবর্তন করতে ইতিহাসের আইটেমটি অ্যাক্সেস করতে পারি

//lots of code here relating to my whatever request I just ran delete, put so on

this.props.history.push("/") // then put in whatever url you want to go to

এছাড়াও আমি কেবল একটি কোডিং বুটক্যাম্প ছাত্র, সুতরাং আমি কোনও বিশেষজ্ঞ নই, তবে আমি জানি আপনি ব্যবহার করতে পারেন 

window.location = "/" //wherever you want to go

আমি ভুল হলে আমাকে সংশোধন করুন, কিন্তু যখন আমি এটি পরীক্ষা করে দেখলাম যে এটি পুরো পৃষ্ঠাটি পুনরায় লোড করেছে যা আমি ভেবেছিলাম যে প্রতিক্রিয়া ব্যবহারের পুরো পয়েন্টটিকে পরাস্ত করে।

0

একটি কাস্টম তৈরি করুন Routerনিজস্ব সঙ্গে browserHistory:

import React from 'react';
import { Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';

export const history = createBrowserHistory();

const ExtBrowserRouter = ({children}) => (
  <Router history={history} >
  { children }
  </Router>
);

export default ExtBrowserRouter

এর পরে, আপনার রুটে যেখানে আপনি নিজের সংজ্ঞা দেন সেখানে Routerনিম্নলিখিতটি ব্যবহার করুন:

import React from 'react';       
import { /*BrowserRouter,*/ Route, Switch, Redirect } from 'react-router-dom';

//Use 'ExtBrowserRouter' instead of 'BrowserRouter'
import ExtBrowserRouter from './ExtBrowserRouter'; 
...

export default class Root extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <ExtBrowserRouter>
          <Switch>
            ...
            <Route path="/login" component={Login}  />
            ...
          </Switch>
        </ExtBrowserRouter>
      </Provider>
    )
  }
}

অবশেষে, historyআপনার যেখানে প্রয়োজন সেখানে আমদানি করুন এবং এটি ব্যবহার করুন:

import { history } from '../routers/ExtBrowserRouter';
...

export function logout(){
  clearTokens();      
  history.push('/login'); //WORKS AS EXPECTED!
  return Promise.reject('Refresh token has expired');
}
— Nolesh
সূত্র
0

যদি আপনি কোনও উপাদানটির প্রপকে কোনও মান হিসাবে কোনও ফাংশনটি পাস করার সময় ইতিহাস ব্যবহার করতে চান তবে সাথে রিমিক্যাক্ট-রাউটার 4 কেবলমাত্র কম্পোনেন্টের historyরেন্ডার বৈশিষ্ট্যের মধ্যে প্রোপটি গঠন করতে পারেন <Route/>এবং তারপরে ব্যবহার করতে পারেনhistory.push()

    <Route path='/create' render={({history}) => (
      <YourComponent
        YourProp={() => {
          this.YourClassMethod()
          history.push('/')
        }}>
      </YourComponent>
    )} />

দ্রষ্টব্য: এটি কাজ করার জন্য আপনাকে অবশ্যই আপনার মূল উপাদানটির চারপাশে প্রতিক্রিয়া রাউটারের ব্রাউজাররউটার উপাদানটি মোড়ানো উচিত (উদাহরণস্বরূপ যা সূচক.জেজে থাকতে পারে)

— কেওল শাহ
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.