প্রতিক্রিয়া-রাউটার 5.1.0+ উত্তর (হুক ব্যবহার করে প্রতিক্রিয়া> 16.8 ব্যবহার করে)
আপনি useHistoryকার্যকরী উপাদানগুলিতে নতুন হুক ব্যবহার করতে পারেন এবং প্রোগ্রামগতভাবে নেভিগেট করতে পারেন:
import { useHistory } from "react-router-dom";
function HomeButton() {
let history = useHistory();
// use history.push('/some/path') here
};
প্রতিক্রিয়া-রাউটার 4.0.0+ উত্তর
৪.০ এবং তার উপরে, ইতিহাসটিকে আপনার উপাদানগুলির প্রপোস হিসাবে ব্যবহার করুন।
class Example extends React.Component {
// use `this.props.history.push('/some/path')` here
};
দ্রষ্টব্য: আপনার উপাদান দ্বারা রেন্ডার করা হয়নি সে ক্ষেত্রে এই.পড়গুলি। হিস্টরিটি বিদ্যমান নেই <Route>। <Route path="..." component={YourComponent}/>আপনার কম্পোনেন্টে এটি.প্রোসস হিস্ট্রি ব্যবহার করা উচিত
প্রতিক্রিয়া-রাউটার 3.0.0+ উত্তর
3.0 এবং তারপরে, রাউটারটি আপনার উপাদানগুলির উত্স হিসাবে ব্যবহার করুন।
class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};
প্রতিক্রিয়া-রাউটার 2.4.0+ উত্তর
২.৪ এবং তদূর্ধের ক্ষেত্রে, রাউটারটি আপনার উপাদানগুলির প্রপোস হিসাবে পেতে একটি উচ্চতর অর্ডার উপাদান ব্যবহার করুন।
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
};
প্রতিক্রিয়া-রাউটার 2.0.0+ উত্তর
এই সংস্করণটি 1.x এর সাথে পিছনে সামঞ্জস্যপূর্ণ তাই আপগ্রেড গাইডের দরকার নেই। উদাহরণগুলির মধ্যে দিয়ে যাওয়া যথেষ্ট ভাল হওয়া উচিত।
এটি বলেছে, আপনি যদি নতুন প্যাটার্নে যেতে চান, রাউটারের ভিতরে একটি ব্রাউজারের ইতিহাস মডিউল রয়েছে যা দিয়ে আপনি অ্যাক্সেস করতে পারবেন
import { browserHistory } from 'react-router'
এখন আপনার ব্রাউজারের ইতিহাসে অ্যাক্সেস রয়েছে, সুতরাং আপনি ধাক্কা, প্রতিস্থাপন ইত্যাদির মতো জিনিসগুলি করতে পারেন ... যেমন:
browserHistory.push('/some/path')
আরও পড়া:
ইতিহাস এবং
নেভিগেশন
প্রতিক্রিয়া-রাউটার 1.xx উত্তর
আমি আপগ্রেডিং বিশদে যাব না। আপনি যে সম্পর্কে পড়তে পারেন আপগ্রেড গাইডে
এখানে প্রশ্ন সম্পর্কে প্রধান পরিবর্তন হ'ল নেভিগেশন মিশ্রণ থেকে ইতিহাসে পরিবর্তন। এখন এটি রুট পরিবর্তন করতে ব্রাউজারের ইতিহাস API ব্যবহার করছে যাতে আমরা ব্যবহার করবpushState() এখন থেকে ।
এখানে মিক্সিন ব্যবহারের একটি উদাহরণ রয়েছে:
var Example = React.createClass({
mixins: [ History ],
navigateToHelpPage () {
this.history.pushState(null, `/help`);
}
})
নোট করুন যে এটি র্যাক্ট / ইতিহাসHistory থেকে এসেছে প্রকল্প । প্রতিক্রিয়া-রাউটার থেকে নিজেই নয়।
আপনি যদি কোনও কারণে ম্যাক্সিন ব্যবহার করতে না চান (সম্ভবত ES6 শ্রেণীর কারণে) তবে আপনি রাউটার থেকে যে ইতিহাসটি পেয়েছেন তা অ্যাক্সেস করতে পারবেন this.props.history । এটি কেবল আপনার রাউটার দ্বারা সরবরাহিত উপাদানগুলির জন্য অ্যাক্সেসযোগ্য। সুতরাং, আপনি যদি এটি কোনও সন্তানের উপাদানগুলিতে ব্যবহার করতে চান তবে এটির মাধ্যমে একটি অ্যাট্রিবিউট হিসাবে পাস করতে হবে props।
তাদের নতুন রিলিজ সম্পর্কে আরও পড়তে পারেন 1.0.x ডকুমেন্টেশনে
এখানে আপনার উপাদানগুলির বাইরে নেভিগেট সম্পর্কে বিশেষত একটি সহায়তা পৃষ্ঠা রয়েছে
এটি একটি রেফারেন্স দখল history = createHistory()এবং এটি কল replaceStateকরার পরামর্শ দেয়।
প্রতিক্রিয়া-রাউটার 0.13.x উত্তর
আমি একই সমস্যায় পড়েছি এবং কেবলমাত্র নেভিগেশন মিক্সিনের সাথে সমাধানটি পেয়েছি যা প্রতিক্রিয়া-রাউটারের সাথে আসে।
আমি এটি কীভাবে করেছি তা এখানে
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>);
}
});
transitionTo()অ্যাক্সেসের প্রয়োজন ছাড়াই আমি কল করতে সক্ষম হয়েছি.context
অথবা আপনি অভিনব ES6 চেষ্টা করতে পারেন class
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
নোট: যদি আপনি Redux ব্যবহার করছেন, আরেকটা প্রকল্পের বলা হয়
ReactRouter-Redux আপনি ReactRouter জন্য বাইন্ডিং redux, কিছুটা একই পদ্ধতি যে ব্যবহার দেয়
প্রতিক্রিয়া-Redux করে
প্রতিক্রিয়া-রাউটার-রেডাক্সের কয়েকটি পদ্ধতি উপলব্ধ রয়েছে যা ক্রিয়া সংস্থাগুলি থেকে সহজ নেভিগেটের অনুমতি দেয়। প্রতিক্রিয়া নেটিভের বিদ্যমান আর্কিটেকচার রয়েছে এমন লোকদের জন্য এগুলি বিশেষত কার্যকর হতে পারে এবং তারা ন্যূনতম বয়লারপ্লেট ওভারহেড সহ প্রতিক্রিয়া ওয়েবে একই প্যাটার্নগুলি ব্যবহার করতে চান।
নিম্নলিখিত পদ্ধতিগুলি এক্সপ্লোর করুন:
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>