ReactJS와 React-Router를 처음 사용합니다. prop -router<Link/>
로부터 객체 를 props 통해받는 구성 요소가 있습니다. 사용자 가이 구성 요소 내에서 ‘다음’버튼을 클릭 할 때마다 객체를 수동으로 호출하려고합니다 .<Link/>
지금은 Refs 를 사용하여 백업 인스턴스 에 액세스하고 <Link/>
생성 되는 ‘a’태그를 수동으로 클릭합니다 .
질문 : 링크를 수동으로 호출하는 방법이 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>
...
);
}
});
...
답변
React Router v4-Redirect Component (2017/04/15 업데이트)
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 반응-참조 라우터 컨텍스트
Router
React 컴포넌트에 노출 된 컨텍스트를 활용할 수도 있습니다 .
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 />
후드 아래에서 작동 하는 방식입니다.
React 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에는 다음을 통해 객체에 액세스 할 수 있는 withRouter 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 버전 , 당신은 사용할 수 useHistory
의 후크를 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>
);
}
답변
또는 onClick을 실행 해 볼 수도 있습니다 (더 강력한 솔루션).
window.location.assign("/sample");
답변
좋아, 나는 그것에 대한 적절한 해결책을 찾을 수 있다고 생각한다.
이제 문서 <Link/>
로 소품 으로 보내는 대신 <NextLink/>
반응 라우터 링크에 대한 사용자 정의 래퍼 인을 보냅니다 . 이렇게하면 문서 구조 안에 라우팅 코드가 없어도 링크 구조의 일부로 오른쪽 화살표를 사용할 수 있습니다.
업데이트 된 코드는 다음과 같습니다.
//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의 컨텍스트를 통해 push 메소드를 쉽게 호출 할 수 있습니다.
this.context.router.push(this.props.exitPath);
컨텍스트는 다음과 같습니다.
static contextTypes = {
router: React.PropTypes.object,
};
답변
다시 이것은 JS입니다 🙂 이것은 여전히 작동합니다 ….
var linkToClick = document.getElementById('something');
linkToClick.click();
<Link id="something" to={/somewhaere}> the link </Link>