ප්රතික්රියා-රවුටරය 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+ පිළිතුර
4.0 සහ ඊට ඉහළින්, ඉතිහාසය ඔබේ සංරචකයේ මුක්කු ලෙස භාවිතා කරන්න.
class Example extends React.Component {
// use `this.props.history.push('/some/path')` here
};
සටහන: ඔබේ සංරචකය විදැහුම් නොකළ අවස්ථාවකදී this.props.history නොපවතී <Route>. <Route path="..." component={YourComponent}/>YourComponent හි this.props.history ලබා ගැනීමට ඔබ භාවිතා කළ යුතුය
ප්රතික්රියා-රවුටරය 3.0.0+ පිළිතුර
3.0 සහ ඊට ඉහළින්, ඔබේ සංරචකයේ මුක්කු ලෙස රවුටරය භාවිතා කරන්න.
class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};
ප්රතික්රියා-රවුටරය 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
};
ප්රතික්රියා-රවුටරය 2.0.0+ පිළිතුර
මෙම අනුවාදය 1.x සමඟ පසුපසට අනුකූල වේ, එබැවින් යාවත්කාලීන කිරීමේ මාර්ගෝපදේශයක් අවශ්ය නොවේ. උදාහරණ හරහා යාම පමණක් හොඳ විය යුතුය.
එයින් කියැවෙන්නේ, ඔබට නව රටාවට මාරුවීමට අවශ්ය නම්, ඔබට ප්රවේශ විය හැකි රවුටරය තුළ බ්‍රවුසර ඉතිහාස මොඩියුලයක් තිබේ
import { browserHistory } from 'react-router'
දැන් ඔබට ඔබගේ බ්‍රව්සර ඉතිහාසයට ප්‍රවේශය ඇත, එබැවින් ඔබට තල්ලු කිරීම, ප්‍රතිස්ථාපනය කිරීම වැනි දේ කළ හැකිය ... වැනි:
browserHistory.push('/some/path')
වැඩිදුර කියවීම:
ඉතිහාසය සහ
සංචලනය
ප්රතික්රියා-රවුටරය 1.xx පිළිතුර
මම විස්තර යාවත්කාලීන කිරීමට නොයන්නෙමි. උත්ශ්‍රේණි කිරීමේ මාර්ගෝපදේශය තුළ ඔබට ඒ ගැන කියවිය හැකිය
මෙහි ඇති ප්‍රශ්නය පිළිබඳ ප්‍රධාන වෙනස වන්නේ සංචාලන මිශ්‍රණයේ සිට ඉතිහාසය දක්වා වෙනස් වීමයි. දැන් එය බ්‍රවුසරයේ ඉතිහාසය ඒපීඅයි මාර්ගය වෙනස් කිරීමට භාවිතා කරයි, එබැවින් අපි 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 පිළිතුර
මම එකම ගැටලුවකට පැටලී ඇති අතර විසඳුම සොයා ගත හැකි වූයේ ප්රතික්රියා-රවුටරය සමඟ එන Navigation mixin සමඟ පමණි.
මෙන්න මම එය කළ ආකාරය
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
};
ප්රතික්රියා-රවුටරය-රෙඩක්ස්
සටහන: ඔයා තමයි රංගනයක් භාවිතා කරන්නේ නම්, නමින් තවත් ව්යාපෘතියක් ඇති
ReactRouter-රංගනයක් ඔබ ReactRouter සඳහා සබඳතා රංගනයක් ලබා දෙන බව, තරමක් එම ක්රමය යොදා බව
ප්රතිචාර දක්වයි-රංගනයක් බවක්
React-Router-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>