리액트 라우터에서 수동으로 링크를 호출하는 방법
a를 .<Link/>반응 반응 반응의 물체.사용자가 이 구성 요소에서 '다음' 버튼을 클릭할 때마다 호출합니다.<Link/>수동으로 오브젝트 합니다.
현재 참조를 사용하여 백업인스턴스에 접속하여 수동으로 'a' 태그를 클릭하여<Link/>에 의해 생성됩니다.
질문:수동으로 링크를 호출하는 방법이 있습니까(예:this.props.next.go
현재 가지고 있는 코드는 다음과 같습니다.
//in MasterPage.js
var sampleLink = <Link to="/sample">Go To Sample</Link>
<Document next={sampleLink} />
//in Document.js
...
var Document = React.createClass({
_onClickNext: function() {
var next = this.refs.next.getDOMNode();
next.querySelectorAll('a').item(0).click(); //this sounds like hack to me
},
render: function() {
return (
...
<div ref="next">{this.props.next} <img src="rightArrow.png" onClick={this._onClickNext}/></div>
...
);
}
});
...
원하는 코드는 다음과 같습니다.
//in MasterPage.js
var sampleLink = <Link to="/sample">Go To Sample</Link>
<Document next={sampleLink} />
//in Document.js
...
var Document = React.createClass({
render: function() {
return (
...
<div onClick={this.props.next.go}>{this.props.next.label} <img src="rightArrow.png" /> </div>
...
);
}
});
...
리액트 라우터 v6 - 리액트 17+ (2022년 1월 14일 갱신)
import React, {useCallback} from 'react';
import {useNavigate} from 'react-router-dom';
export default function StackOverflowExample() {
const navigate = useNavigate();
const handleOnClick = useCallback(() => navigate('/sample', {replace: true}), [navigate]);
return (
<button type="button" onClick={handleOnClick}>
Go home
</button>
);
}
이은 v6의 v5의 변경입니다.useNavigate우선 리액트 훅이 되었습니다. useHistory는 권장되지 않으며 권장되지 않습니다.
리액트 라우터 v5 - 후크를 사용한 리액트 16.8+
리액트 훅을 활용한다면useHistoryReact Router v5 API.
import React, {useCallback} from 'react';
import {useHistory} from 'react-router-dom';
export default function StackOverflowExample() {
const history = useHistory();
const handleOnClick = useCallback(() => history.push('/sample'), [history]);
return (
<button type="button" onClick={handleOnClick}>
Go home
</button>
);
}
핸들러를 경우는, 핸들러를 .useCallback
const handleOnClick = () => history.push('/sample');
리액트 라우터 v4 - 리다이렉트컴포넌트
v4 권장 방법은 렌더 메서드가 리다이렉트를 잡을 수 있도록 하는 것입니다.상태 또는 소품을 사용하여 리다이렉트컴포넌트를 표시할 필요가 있는지 여부를 결정합니다(그 후 리다이렉트가 트리거됩니다).
import { Redirect } from 'react-router';
// ... your class implementation
handleOnClick = () => {
// some action...
// then redirect
this.setState({redirect: true});
}
render() {
if (this.state.redirect) {
return <Redirect push to="/sample" />;
}
return <button onClick={this.handleOnClick} type="button">Button</button>;
}
참고 자료: https://reacttraining.com/react-router/web/api/Redirect
리액트 라우터 v4 - 레퍼런스라우터 컨텍스트
에도 ,, 음, 음, 음, 다, 다, 다, 습, 습, 습, you, you, you, you, you, you, you, you, you, you 등을 활용할Router반응합니다.
static contextTypes = {
router: PropTypes.shape({
history: PropTypes.shape({
push: PropTypes.func.isRequired,
replace: PropTypes.func.isRequired
}).isRequired,
staticContext: PropTypes.object
}).isRequired
};
handleOnClick = () => {
this.context.router.push('/sample');
}
하면 됩니다.<Redirect />보닛 아래에서 작동한다.
참고 자료: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Redirect.js#L46,L60
Respect Router v4 - 외부 뮤트 이력 객체
해야 하는 v2의 수 .BrowserRouter 나서 그를 합니다.history이치노아래는 기본적인 예이지만, 필요에 따라 맞춤 가능한 소품으로 주입할 수 있도록 구성할 수 있습니다.라이프 사이클에는 주의사항이 있습니다만, v2와 같이 항상 라우터를 재렌더합니다.이는 액션 함수에서 API 요청을 받은 후 리다이렉트할 때 유용합니다.
// browser router file...
import createHistory from 'history/createBrowserHistory';
import { Router } from 'react-router';
export const history = createHistory();
export default class BrowserRouter extends Component {
render() {
return <Router history={history} children={this.props.children} />
}
}
// your main file...
import BrowserRouter from './relative/path/to/BrowserRouter';
import { render } from 'react-dom';
render(
<BrowserRouter>
<App/>
</BrowserRouter>
);
// some file... where you don't have React instance references
import { history } from './relative/path/to/BrowserRouter';
history.push('/sample');
★★★BrowserRouter확장: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/BrowserRouter.js
리액트 라우터 v2
에 새 상태를 푸시합니다.browserHistory인스턴스:
import {browserHistory} from 'react-router';
// ...
browserHistory.push('/sample');
참고 자료: https://github.com/reactjs/react-router/blob/master/docs/guides/NavigatingOutsideOfComponents.md
React Router 4에는 With Router가 포함되어 있습니다.HOC에 접속할 수중에 있는history을 통해 이의를 제기하다.this.props:
import React, {Component} from 'react'
import {withRouter} from 'react-router-dom'
class Foo extends Component {
constructor(props) {
super(props)
this.goHome = this.goHome.bind(this)
}
goHome() {
this.props.history.push('/')
}
render() {
<div className="foo">
<button onClick={this.goHome} />
</div>
}
}
export default withRouter(Foo)
버전 5.x 에서는, 다음의 훅을 사용할 수 있습니다.react-router-dom:
// Sample extracted from https://reacttraining.com/react-router/core/api/Hooks/usehistory
import { useHistory } from "react-router-dom";
function HomeButton() {
const history = useHistory();
function handleClick() {
history.push("/home");
}
return (
<button type="button" onClick={handleClick}>
Go home
</button>
);
}
또는 실행해 볼 수도 있습니다.이것을 클릭해 주세요(좀 더 격렬한 솔루션).
window.location.assign("/sample");
여기 답변은 구식입니다.
리액트 라우터 6
useHistory권장되지 않는 v6에서는 useNavigate대신 후크를 끼웁니다.
import { useNavigate } from 'react-router-dom'
const navigate = useNavigate()
navigate(`/somewhere`, { replace: true })
좋아요, 그에 대한 적절한 해결책을 찾을 수 있을 것 같아요.
이제 보내는 대신<Link/>문서 작성의 소책자를 송부탁드립니다.<NextLink/>react-router Link 커스텀래퍼입니다.이렇게 하면 오른쪽 화살표를 Link 구조의 일부로 사용할 수 있지만 Document 오브젝트 내에 라우팅 코드가 있는 것은 피할 수 있습니다.
업데이트된 코드는 다음과 같습니다.
//in NextLink.js
var React = require('react');
var Right = require('./Right');
var NextLink = React.createClass({
propTypes: {
link: React.PropTypes.node.isRequired
},
contextTypes: {
transitionTo: React.PropTypes.func.isRequired
},
_onClickRight: function() {
this.context.transitionTo(this.props.link.props.to);
},
render: function() {
return (
<div>
{this.props.link}
<Right onClick={this._onClickRight} />
</div>
);
}
});
module.exports = NextLink;
...
//in MasterPage.js
var sampleLink = <Link to="/sample">Go To Sample</Link>
var nextLink = <NextLink link={sampleLink} />
<Document next={nextLink} />
//in Document.js
...
var Document = React.createClass({
render: function() {
return (
...
<div>{this.props.next}</div>
...
);
}
});
...
추신: 최신 버전의 리액트 라우터를 사용하는 경우this.context.router.transitionTo대신this.context.transitionTo이 코드는 리액트라우터 버전 0.12.X에서 정상적으로 동작합니다.
리액트 라우터 4
v4에서는 컨텍스트를 통해 푸시 메서드를 쉽게 호출할 수 있습니다.
this.context.router.push(this.props.exitPath);
여기서 context는 다음과 같습니다.
static contextTypes = {
router: React.PropTypes.object,
};
괜찮으시다면extend그Link컴포넌트는 그 논리 중 일부를 활용하기 위한 것입니다.onClick()핸들러, 방법은 다음과 같습니다.
import React from 'react';
import { Link } from "react-router-dom";
// Extend react-router-dom Link to include a function for validation.
class LinkExtra extends Link {
render() {
const linkMarkup = super.render();
const { validation, ...rest} = linkMarkup.props; // Filter out props for <a>.
const onclick = event => {
if (!this.props.validation || this.props.validation()) {
this.handleClick(event);
} else {
event.preventDefault();
console.log("Failed validation");
}
}
return(
<a {...rest} onClick={onclick} />
)
}
}
export default LinkExtra;
사용.
<LinkExtra to="/mypage" validation={() => false}>Next</LinkExtra>
이것도 JS입니다. :) 아직 동작하고 있습니다.
var linkToClick = document.getElementById('something');
linkToClick.click();
<Link id="something" to={/somewhaere}> the link </Link>
언급URL : https://stackoverflow.com/questions/29244731/how-to-manually-invoke-link-in-react-router
'programing' 카테고리의 다른 글
| Rails 애플리케이션과 동일한 도메인에서 Wordpress를 실행하는 가장 좋은 방법은 무엇입니까? (0) | 2023.03.16 |
|---|---|
| JSON jsonObject.optString()이 문자열 "null"을 반환합니다. (0) | 2023.03.16 |
| JSON 개체를 TypeScript 클래스에 캐스트하려면 어떻게 해야 합니까? (0) | 2023.03.16 |
| PHP를 사용하여 WordPress에서 페이지 제목 설정 (0) | 2023.03.16 |
| AngularJs ng트리거 onblur 변경 (0) | 2023.03.16 |