[reactjs] 반응 라우터를 사용하여 프로그래밍 방식으로 탐색

React-Router 5.1.0+ 답변 (후크 사용 및 React> 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와 역 호환되므로 업그레이드 안내서가 필요하지 않습니다. 예제를 살펴 보는 것만으로도 충분합니다.

즉, 새로운 패턴으로 전환하려면 라우터 내부에 액세스 할 수있는 browserHistory 모듈이 있습니다.

import { browserHistory } from 'react-router'

이제 브라우저 기록에 액세스 할 수 있으므로 밀어 넣기, 바꾸기 등의 작업을 수행 할 수 있습니다.

browserHistory.push('/some/path')

추가 자료 :
기록 및
탐색

반응 라우터 1.xx 답변

나는 세부 사항을 업그레이드하지 않을 것입니다. 업그레이드 안내서 에서 이에 대해 읽을 수 있습니다

여기서 질문에 대한 주요 변경 사항은 탐색 믹스 인에서 기록으로 변경되었습니다. 이제 브라우저 historyAPI를 사용하여 경로를 변경하므로 앞으로 사용할 것 pushState()입니다.

다음은 Mixin을 사용하는 예입니다.

var Example = React.createClass({
  mixins: [ History ],
  navigateToHelpPage () {
    this.history.pushState(null, `/help`);
  }
})

이주의 History에서 온다 rackt / 역사 프로젝트. React-Router 자체가 아닙니다.

ES6 클래스로 인해 어떤 이유로 Mixin을 사용하지 않으려면 라우터에서 가져온 기록에 액세스 할 수 있습니다 this.props.history. 라우터에서 렌더링 한 구성 요소에만 액세스 할 수 있습니다. 따라서 하위 구성 요소에서 사용하려면를 통해 속성으로 전달해야합니다 props.

1.0.x 설명서 에서 새 릴리스에 대한 자세한 내용을 읽을 수 있습니다

컴포넌트 외부 탐색에 대한 도움말 페이지 는 다음과 같습니다.

참조를 잡고 history = createHistory()호출 하는 것이 좋습니다 replaceState.

반응 라우터 0.13.x 답변

나는 같은 문제에 봉착했고 반응 라우터와 함께 제공되는 Navigation 믹스 인 솔루션 만 찾을 수있었습니다.

내가 한 방법은 다음과 같습니다

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 를 사용하는 경우 React-Redux 와 동일한 접근 방식을 사용하여 ReactRouter에 대한 redux 바인딩을 제공하는
React-Router-Redux 라는 또 다른 프로젝트
가 있습니다.

React-Router-Redux에는 액션 제작자 내부를 간단하게 탐색 할 수있는 몇 가지 방법이 있습니다. 이는 React Native에 기존 아키텍처가있는 사람들에게 특히 유용 할 수 있으며, 보일러 플레이트 오버 헤드를 최소화하면서 React Web에서 동일한 패턴을 활용하고자합니다.

다음 방법을 탐색하십시오.

• 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>

답변

import { browserHistory } from 'react-router';
browserHistory.push('/some/path');

this.props.history.push('/some/path');

import { push } from 'react-router-redux';
this.props.dispatch(push('/some/path'));

import React from 'react';

export default class MyComponent extends React.Component {
  navigateToPage = () => {
    this.context.router.push('/my-route')
  };

  render() {
    return (
      <button onClick={this.navigateToPage}>Go!</button>
    );
  }
}

MyComponent.contextTypes = {
  router: React.PropTypes.object.isRequired
}

import createBrowserHistory from 'history/createBrowserHistory'
export default createBrowserHistory()

import React, { Component } from 'react';
import history from './history';

class BasicComponent extends Component {

    goToIndex(e){
        e.preventDefault();
        history.push('/');
    }

    render(){
        return <a href="#" onClick={this.goToIndex}>Previous</a>;
    }
}

import React, { Component } from 'react';

class BasicComponent extends Component {

    navigate(e){
        e.preventDefault();
        this.props.history.push('/url');
    }

    render(){
        return <a href="#" onClick={this.navigate}>Previous</a>;
    }
}

import { useRouterHistory } from 'react-router'
import { createHashHistory } from 'history'
const appHistory = useRouterHistory(createHashHistory)({ queryKey: false });

export default appHistory;

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Redirect } from 'react-router'
import appHistory from './app_history'
...
const render((
  <Router history={appHistory}>
  ...
  </Router>
), document.querySelector('[data-role="app"]'));

import appHistory from '../app_history'
...
ajaxLogin('/login', (err, data) => {
  if (err) {
    console.error(err); // login failed
  } else {
    // logged in
    appHistory.replace('/dashboard'); // or .push() if you don't need .replace()
  }
})

if (navigate) {
  return <Redirect to="/" push={true} />
}

import { Redirect } from 'react-router'

class FooBar extends React.Component {
  state = {
    navigate: false
  }

  render() {
    const { navigate } = this.state

    // here is the important part
    if (navigate) {
      return <Redirect to="/" push={true} />
    }
   // ^^^^^^^^^^^^^^^^^^^^^^^

    return (
      <div>
        <button onClick={() => this.setState({ navigate: true })}>
          Home
        </button>
      </div>
    )
  }
}