react-back to page history를 설정하려면 어떻게 설정합니까?
특정 경로가 아닌 이전 페이지로 돌아갈 수 있는 방법을 가르쳐 주실 수 있습니까?
이 코드를 사용하는 경우:
var BackButton = React.createClass({
mixins: [Router.Navigation],
render: function() {
return (
<button
className="button icon-left"
onClick={this.navigateBack}>
Back
</button>
);
},
navigateBack: function(){
this.goBack();
}
});
이 에러가 발생합니다.라우터 이력이 없기 때문에 goBack()은 무시되었습니다.
내 경로는 다음과 같습니다.
// Routing Components
Route = Router.Route;
RouteHandler = Router.RouteHandler;
DefaultRoute = Router.DefaultRoute;
var routes = (
<Route name="app" path="/" handler={OurSchoolsApp}>
<DefaultRoute name="home" handler={HomePage} />
<Route name="add-school" handler={AddSchoolPage} />
<Route name="calendar" handler={CalendarPage} />
<Route name="calendar-detail" path="calendar-detail/:id" handler={CalendarDetailPage} />
<Route name="info-detail" path="info-detail/:id" handler={InfoDetailPage} />
<Route name="info" handler={InfoPage} />
<Route name="news" handler={NewsListPage} />
<Route name="news-detail" path="news-detail/:id" handler={NewsDetailPage} />
<Route name="contacts" handler={ContactPage} />
<Route name="contact-detail" handler={ContactDetailPage} />
<Route name="settings" handler={SettingsPage} />
</Route>
);
Router.run(routes, function(Handler){
var mountNode = document.getElementById('app');
React.render(<Handler /> , mountNode);
});
React v16 및 ReactRouter v4.2.0으로 업데이트(2017년 10월):
class BackButton extends Component {
static contextTypes = {
router: () => true, // replace with PropTypes.object if you use them
}
render() {
return (
<button
className="button icon-left"
onClick={this.context.router.history.goBack}>
Back
</button>
)
}
}
React v15 및 ReactRouter v3.0.0으로 업데이트(2016년 8월):
var browserHistory = ReactRouter.browserHistory;
var BackButton = React.createClass({
render: function() {
return (
<button
className="button icon-left"
onClick={browserHistory.goBack}>
Back
</button>
);
}
});
내장된 iframe을 사용하여 조금 더 복잡한 예를 사용하여 findle을 작성했습니다.https://jsfiddle.net/kwg1da3a/
React v14 및 ReacRouter v1.0.0 (2015년 7월 10일)
다음과 같이 할 수 있습니다.
var React = require("react");
var Router = require("react-router");
var SomePage = React.createClass({
...
contextTypes: {
router: React.PropTypes.func
},
...
handleClose: function () {
if (Router.History.length > 1) {
// this will take you back if there is history
Router.History.back();
} else {
// this will take you to the parent route if there is no history,
// but unfortunately also add it as a new route
var currentRoutes = this.context.router.getCurrentRoutes();
var routeName = currentRoutes[currentRoutes.length - 2].name;
this.context.router.transitionTo(routeName);
}
},
...
되돌아가는 데 필요한 전력이 있는지 주의해야 합니다.페이지를 직접 누른 후 다시 누르면 앱 이전의 브라우저 기록으로 돌아갑니다.
이 솔루션은 두 가지 시나리오를 모두 처리합니다.단, 뒤로 버튼을 사용하여 페이지 내에서 탐색할 수 있는(및 브라우저 기록에 추가할 수 있는) iframe은 처리되지 않습니다.솔직히, 나는 그것이 반응 라우터의 결함이라고 생각한다.작성된 문제: https://github.com/rackt/react-router/issues/1874
리액트 훅 사용
Import:
import { useHistory } from "react-router-dom";
상태 비저장 구성 요소:
let history = useHistory();
이벤트 호출:
history.goBack()
이벤트 버튼에서 사용하는 예:
<button onClick={history.goBack}>Back</button>
또는
<button onClick={() => history.goBack()}>Back</button>
니 browser 서 라 브라우저 역사 에 터 니 다 이 that다같 i need think just과 by음하 :해 to router you야초합화기면우 like려로 int browser<Router history={new BrowserHistory}>
.
Before that, you should require 그 전에 다음 조건을 충족해야 합니다.BrowserHistory
부에서'react-router/lib/BrowserHistory'
다음은 ES6를 사용하는 예입니다.
const BrowserHistory = require('react-router/lib/BrowserHistory').default;
const App = React.createClass({
render: () => {
return (
<div><button onClick={BrowserHistory.goBack}>Go Back</button></div>
);
}
});
React.render((
<Router history={BrowserHistory}>
<Route path="/" component={App} />
</Router>
), document.body);
수 품 import입
withRouter
import { withRouter } from 'react-router-dom';
구성 요소를 다음과 같이 내보냅니다.
export withRouter(nameofcomponent)
Example, on button click, call 예: 버튼을 클릭했을 때 콜을 합니다.
goBack
::::<button onClick={this.props.history.goBack}>Back</button>
Tested on 테스트 완료일react-router-dom
v4.3V4.3V4.3V4.3V4.3V4.3
리액트 라우터 v6
useNavigate
후크는 지금 바로 되돌리는 권장 방법입니다.
import { useNavigate } from 'react-router-dom';
function App() {
const navigate = useNavigate();
return (
<>
<button onClick={() => navigate(-1)}>go back</button>
<button onClick={() => navigate(1)}>go forward</button>
</>
);
}
Go back/forward multiple history stack entries:
<button onClick={() => navigate(-2)}>go two back</button>
<button onClick={() => navigate(2)}>go two forward</button>
Go to specific route:
navigate("users") // go to users route, like history.push
navigate("users", { replace: true }) // go to users route, like history.replace
navigate("users", { state }) // go to users route, pass some state in
useNavigate
useHistory
향후 리액트 서스펜스/동시 모드를 보다 효과적으로 지원할 수 있습니다.
this.context.router.goBack()
내비게이션 믹스인이 필요 없습니다!
리액트 라우터, 스테이트리스 기능을 사용한 혼합 없이 ES6 방식.
import React from 'react'
import { browserHistory } from 'react-router'
export const Test = () => (
<div className="">
<button onClick={browserHistory.goBack}>Back</button>
</div>
)
특정 페이지로 돌아갑니다.
import { useHistory } from "react-router-dom";
const history = useHistory();
const routeChange = () => {
let path = '/login';
history.push(path);
};
이전 페이지로 돌아가기:
import { useHistory } from "react-router-dom";
const history = useHistory();
const routeChange = () => {
history.goBack()
};
React 16.0과 React-router v4를 사용한 작업 예를 확인하십시오. Github 코드를 확인하십시오.
withRouter
★★★★★★★★★★★★★★★★★」history.goBack()
이게 제가 실천하고 있는 아이디어입니다.
History.js
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom'
import './App.css'
class History extends Component {
handleBack = () => {
this.props.history.goBack()
}
handleForward = () => {
console.log(this.props.history)
this.props.history.go(+1)
}
render() {
return <div className="container">
<div className="row d-flex justify-content-between">
<span onClick={this.handleBack} className="d-flex justify-content-start button">
<i className="fas fa-arrow-alt-circle-left fa-5x"></i>
</span>
<span onClick={this.handleForward} className="d-flex justify-content-end button">
<i className="fas fa-arrow-alt-circle-right fa-5x"></i>
</span>
</div>
</div>
}
}
export default withRouter(History)
페이지 원.js
import React, { Fragment, Component } from 'react'
class PageOne extends Component {
componentDidMount(){
if(this.props.location.state && this.props.location.state.from != '/pageone')
this.props.history.push({
pathname: '/pageone',
state: {
from: this.props.location.pathname
}
});
}
render() {
return (
<Fragment>
<div className="container-fluid">
<div className="row d-flex justify-content-center">
<h2>Page One</h2>
</div>
</div>
</Fragment>
)
}
}
export default PageOne
p.s. 여기에 모든 것을 게시하기에는 암호가 너무 커서 죄송합니다.
이것은 브라우저 및 해시 이력과 함께 작동합니다.
this.props.history.goBack();
이것은 동작하는 BackButton 컴포넌트(React 0.14)입니다.
var React = require('react');
var Router = require('react-router');
var History = Router.History;
var BackButton = React.createClass({
mixins: [ History ],
render: function() {
return (
<button className="back" onClick={this.history.goBack}>{this.props.children}</button>
);
}
});
module.exports = BackButton;
기록이 없는 경우 다음과 같은 작업을 수행할 수 있습니다.
<button className="back" onClick={goBack}>{this.props.children}</button>
function goBack(e) {
if (/* no history */) {
e.preventDefault();
} else {
this.history.goBack();
}
}
react-router v2.x에서는 이 점이 변경되었습니다.ES6에서는 다음과 같이 대응하고 있습니다.
import React from 'react';
import FontAwesome from 'react-fontawesome';
import { Router, RouterContext, Link, browserHistory } from 'react-router';
export default class Header extends React.Component {
render() {
return (
<div id="header">
<div className="header-left">
{
this.props.hasBackButton &&
<FontAwesome name="angle-left" className="back-button" onClick={this.context.router.goBack} />
}
</div>
<div>{this.props.title}</div>
</div>
)
}
}
Header.contextTypes = {
router: React.PropTypes.object
};
Header.defaultProps = {
hasBackButton: true
};
Header.propTypes = {
title: React.PropTypes.string
};
에서는 react-router v4를 사용할 수 .xxxxxx의history.goBack
은 와와다다 which에 해당합니다.history.go(-1)
.
App.js
import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";
import Back from "./Back";
const styles = {
fontFamily: "sans-serif",
textAlign: "left"
};
const App = () => (
<div style={styles}>
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
<hr />
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Back />{/* <----- This is component that will render Back button */}
</div>
</Router>
</div>
);
render(<App />, document.getElementById("root"));
Back.js
import React from "react";
import { withRouter } from "react-router-dom";
const Back = ({ history }) => (
<button onClick={history.goBack}>Back to previous page</button>
);
export default withRouter(Back);
데모: https://codesandbox.io/s/ywmvp95wpj
을 꼭 기억하시기 바랍니다.history
할 수 것은 「」입니다.history.goBack()
신청하기 전에 방문자가 방문했던 페이지를 로드할 수 있습니다.는 방문자가 어플리케이션을 열기 전에 방문한 페이지를 로드할 수 있습니다.
위와 같은 상황을 방지하기 위해 사용자의 마지막 위치를 감시하는 간단한 라이브러리 react-router-last location을 만들었습니다.
사용은 매우 빠르게 전진합니다.사용법은 매우 간단합니다. First you need to install 먼저 설치해야 합니다.react-router-dom
★★★★★★★★★★★★★★★★★」react-router-last-location
부에서npm
.
npm install react-router-dom react-router-last-location --save
Then use 그 후 사용LastLocationProvider
다음과 같이.음음음같 뭇매하다
App.js
import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { LastLocationProvider } from "react-router-last-location";
// ↑
// |
// |
//
// Import provider
//
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";
import Back from "./Back";
const styles = {
fontFamily: "sans-serif",
textAlign: "left"
};
const App = () => (
<div style={styles}>
<h5>Click on About to see your last location</h5>
<Router>
<LastLocationProvider>{/* <---- Put provider inside <Router> */}
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
<hr />
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Back />
</div>
</LastLocationProvider>
</Router>
</div>
);
render(<App />, document.getElementById("root"));
Back.js
import React from "react";
import { Link } from "react-router-dom";
import { withLastLocation } from "react-router-last-location";
// ↑
// |
// |
//
// `withLastLocation` higher order component
// will pass `lastLocation` to your component
//
// |
// |
// ↓
const Back = ({ lastLocation }) => (
lastLocation && <Link to={lastLocation || '/'}>Back to previous page</Link>
);
// Remember to wrap
// your component before exporting
//
// |
// |
// ↓
export default withLastLocation(Back);
데모: https://codesandbox.io/s/727nqm99jj
저는 앞의 답변을 조금 업데이트하고 싶습니다.「 」를 사용하고 react-router >v6.0
useHistory()
에러가 날 예요.useHistory()
최신 버전에는 없습니다.입니다.
// This is a React Router v6 app
import { useNavigate } from "react-router-dom";
function App() {
const navigate = useNavigate();
return (
<>
<button onClick={() => navigate(-2)}>
Go 2 pages back
</button>
<button onClick={() => navigate(-1)}>Go back</button>
<button onClick={() => navigate(1)}>
Go forward
</button>
<button onClick={() => navigate(2)}>
Go 2 pages forward
</button>
</>
);
}
을 사용하세요.useNavigate()
이는 볼수 있습니다.v5
로로 합니다.v6
여기 https://reactrouter.com/docs/en/v6/upgrading/v5
파일 상단에 Router를 사용하여 Import하는 것이 효과적이었습니다.
import { withRouter } from 'react-router-dom'
그런 다음 파일을 사용하여 내보낸 함수를 내 파일 맨 아래에 래핑합니다.
export default withRouter(WebSitePageTitleComponent)
그리고 나서 라우터의 역사 소품들을 볼 수 있게 해주었죠.아래 샘플 코드 전체!
import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import PropTypes from 'prop-types'
class TestComponent extends Component {
constructor(props) {
super(props)
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
event.preventDefault()
this.props.history.goBack()
}
render() {
return (
<div className="page-title">
<a className="container" href="/location" onClick={this.handleClick}>
<h1 className="page-header">
{ this.props.title }
</h1>
</a>
</div>
)
}
}
const { string, object } = PropTypes
TestComponent.propTypes = {
title: string.isRequired,
history: object
}
export default withRouter(TestComponent)
온에 react-router-dom
v6
import { useNavigate } from 'react-router-dom';
function goBack() {
const navigate = useNavigate();
return <button onClick={() => navigate(-1)}>go back</button>
}
import { withRouter } from 'react-router-dom'
this.props.history.goBack();
이 버전을 사용하고 있습니다.
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
순서 1
import { useHistory } from "react-router-dom";`
순서 2
let history = useHistory();
스텝 3
const goToPreviousPath = (e) => {
e.preventDefault();
history.goBack()
}
스텝 4
<Button
onClick={goToPreviousPath}
>
Back
</Button>
리듀스
이 경우에도 하실 수 있습니다.react-router-redux
가지고 있다goBack()
★★★★★★★★★★★★★★★★★」push()
.
이를 위한 샘플러 팩을 다음에 나타냅니다.
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ConnectedRouter
은 「」입니다.history
이력 .환원하다
import React from 'react'
import { render } from 'react-dom'
import { ApolloProvider } from 'react-apollo'
import { Provider } from 'react-redux'
import { ConnectedRouter } from 'react-router-redux'
import client from './components/apolloClient'
import store, { history } from './store'
import Routes from './Routes'
import './index.css'
render(
<ApolloProvider client={client}>
<Provider store={store}>
<ConnectedRouter history={history}>
<Routes />
</ConnectedRouter>
</Provider>
</ApolloProvider>,
document.getElementById('root'),
)
내가 너에게 그 연결 방법을 보여줄게.history
스토어에 이력을 Import하고 싱글톤으로 내보내 앱의 엔트리 포인트에서 사용할 수 있도록 하는 방법에 주목해 주십시오.
import { createStore, applyMiddleware, compose } from 'redux'
import { routerMiddleware } from 'react-router-redux'
import thunk from 'redux-thunk'
import createHistory from 'history/createBrowserHistory'
import rootReducer from './reducers'
export const history = createHistory()
const initialState = {}
const enhancers = []
const middleware = [thunk, routerMiddleware(history)]
if (process.env.NODE_ENV === 'development') {
const { devToolsExtension } = window
if (typeof devToolsExtension === 'function') {
enhancers.push(devToolsExtension())
}
}
const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers)
const store = createStore(rootReducer, initialState, composedEnhancers)
export default store
는 로딩 .react-router-redux
셋업 프로세스를 완료하는 미들웨어 도우미.
다음 부분은 완전히 추가 사항이라고 생각합니다만, 장래의 메리트를 얻을 수 있는 경우를 위해서 포함하겠습니다.
import { combineReducers } from 'redux'
import { routerReducer as routing } from 'react-router-redux'
export default combineReducers({
routing, form,
})
용 i i i i를 쓴다.routerReducer
할 수으로 새로고침 할 수 입니다.shouldComponentUpdate
가 를 때가 있는 NavLink
버튼을 클릭합니다. Redx의은 Redx를 사용하고 있음을 알 수.shouldComponentUpdate
.와 함께routerReducer
, 를 사용할 수 있습니다.mapStateToProps
라우팅 변경을 네비게이션바에 매핑합니다.이것에 의해, 이력 오브젝트가 변경되었을 때에 갱신됩니다.
다음과 같이 합니다.
const mapStateToProps = ({ routing }) => ({ routing })
export default connect(mapStateToProps)(Nav)
사용자용 키워드를 추가할 테니 양해 바랍니다.컴포넌트가 올바르게 업데이트되지 않으면 조사하십시오.shouldComponentUpdate
접속기능을 삭제하고 문제가 해결되는지 확인합니다.만약 그렇다면,routerReducer
URL이 변경되면 컴포넌트가 올바르게 갱신됩니다.
마지막으로, 그 모든 것을 한 후에goBack()
★★★★★★★★★★★★★★★★★」push()
언제든지 좋아요!
다음 임의의 컴포넌트에서 시도합니다.
- Import »
connect()
- 그럴 필요조차 없어
mapStateToProps
★★★★★★★★★★★★★★★★★」mapDispatchToProps
- in from goBack
react-router-redux
- ★★
this.props.dispatch(goBack())
- ★★
this.props.dispatch(push('/sandwich'))
- 긍정적인 감정을 경험하다
샘플링이 더 필요한 경우 https://www.npmjs.com/package/react-router-redux를 참조하십시오.
이렇게 간단히 사용하세요.
<span onClick={() => this.props.history.goBack()}>Back</span>
나에게 효과가 있는 유일한 해결책은 가장 간단한 것이었다.추가 Import는 필요 없습니다.
<a href="#" onClick={() => this.props.history.goBack()}>Back</a>
Tks, IamMHussain
리액트 라우터는 브라우저 이력 API를 기반으로 하는 HTML5 이력 API를 사용하여 리액트 앱에서 쉽게 사용할 수 있는 인터페이스를 제공합니다.History API 입니다.따라서 Import를 하지 않습니다(history 사용 등).
기능 컴포넌트의 경우:
<button onClick={()=>{ window.history.back() }}> Back </button>
클래스 컴포넌트의 경우:
<button onClick={()=>{ this.window.history.back() }}> Back </button>
v6에서는 때 "v6"을 사용하면 .useNavigate
::::
순서 1:
import { useNavigate } from "react-router-dom";
순서 2:
const navigate = useNavigate();
3: 이전 페이지로 돌아가려면 서 3: 3 이 아 지 가 려 면 step 3:: page want돌 if to to back이, you the 3: 페 go 3: 전navigate(-1)
::::
<button onClick={() => navigate(-1)}> Back </button>
반응-ru v6 , 우 액 트 페 이 전 가 를 아 면 우 려 용6 if you 경 -6 the v are로는 reactLink
::::
1: 서 1: 가져오기 : 가져오기: 가져오기 step 가져오기Link
부에서react-router-dom
import { Link } from 'react-router-dom';
Step 2: wrap up the button with 스텝 2: 버튼을 다음으로 정리합니다.Link
것 it it perfectly 。완벽하게 작동한다.
<Link to='..'>
<Button type='button'>Go Back</Button>
</Link>
다음과 같이 다음 컴포넌트를 호출합니다.
<BackButton history={this.props.history} />
컴포넌트는 다음과 같습니다.
import React, { Component } from 'react'
import PropTypes from 'prop-types'
class BackButton extends Component {
constructor() {
super(...arguments)
this.goBack = this.goBack.bind(this)
}
render() {
return (
<button
onClick={this.goBack}>
Back
</button>
)
}
goBack() {
this.props.history.goBack()
}
}
BackButton.propTypes = {
history: PropTypes.object,
}
export default BackButton
사용하고 있는 것:
"react": "15.6.1"
"react-router": "4.2.0"
리액트 스위칭드로어 네비게이션을 어플리케이션의 메인라우터로서 사용하고 있는 경우, 백버튼의 동작을 제어하고 과거로 되돌아가려면 를 사용하여 백버튼을 제어할 수 있습니다.
<NavigationContainer>
<Drawer.Navigator
backBehavior="history">
// your screens come here
</Drawer.Navigator>
</NavigationContainer>
이 코드 조각이 너에게 도움이 될 거야.
this.context.router.history.goBack()
https://reacttraining.com/react-router/web/api/history에 따르면
★★★의 "react-router-dom": "^5.1.2",
,
const { history } = this.props;
<Button onClick={history.goBack}>
Back
</Button>
YourComponent.propTypes = {
history: PropTypes.shape({
goBack: PropTypes.func.isRequired,
}).isRequired,
};
언급URL : https://stackoverflow.com/questions/30915173/react-router-go-back-a-page-how-do-you-configure-history
'programing' 카테고리의 다른 글
형식 스크립트를 컴파일할 때 'tsc 명령어를 찾을 수 없습니다' (0) | 2023.04.05 |
---|---|
MongoDB 및 "가입" (0) | 2023.04.05 |
최근 구문 분석 오류: 구문 오류, 예기치 않은 'endif'(T_ENDIF) (0) | 2023.04.05 |
jQuery 페이지 표시 Wordpress 위젯 후 돔 Css가 손실됨 (0) | 2023.04.05 |
오류: 파일을 찾을 수 없습니다. 'index.js'가 디스크의 해당 이름과 일치하지 않습니다. '.node_modules/React/React' (0) | 2023.04.05 |