React 라우터를 사용하여 프로그래밍 방식으로 탐색

programing

React 라우터를 사용하여 프로그래밍 방식으로 탐색

padding 2023. 3. 29. 21:15

React 라우터를 사용하여 프로그래밍 방식으로 탐색

★★★★★★★★★★★★★★★★ react-router는 를를사사할 the the the the the the the 를 사용할 수 있어요.Link리액트 라우터에 의해 네이티브로 처리되는 링크를 작성한다.

내부적으로는 전화하고 있습니다.this.context.transitionTo(...).

이치노링크에서가 아니라 드롭다운 선택에서(예:).★★★★★★★★★★★★★★★★★★★★★★★★★★? 죠?this.context무슨 일입니까?

는 ★★★★★★★★★★★★★★★★★★를 보았다.Navigation mixin 없이 할 수요?mixins

업데이트: 2022: 리액트 라우터 v6.6.1과 useNavigate

useHistory()훅은 폐지되었습니다.React Router 6을 사용하는 경우 프로그래밍 방식으로 탐색하는 적절한 방법은 다음과 같습니다.

import { useNavigate } from "react-router-dom";

function HomeButton() {
  const navigate = useNavigate();

  function handleClick() {
    navigate("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

후크를 사용한 리액트 라우터 v5.1.0

것이 있다useHistory[ React > 16 . 8 . 0 ]는 [Resact Router]> 5.1.0 입니다.

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>
  );
}

리액트 라우터 v4

React Router의 v4에서는 컴포넌트 내의 프로그래밍 라우팅에 대해 3가지 접근방식을 사용할 수 있습니다.

하다를 사용하세요.withRouter고차 컴포넌트
하여 '연출'을 .<Route>
하다를 사용하세요.context.

리액트 라우터는 대부분 라이브러리를 감싸고 있습니다. history는 브라우저 및 해시 이력과 함께 브라우저와의 상호작용을 처리합니다.또한 메모리 이력을 제공하여 글로벌 이력이 없는 환경에 유용합니다.이는 모바일 앱 개발에서 특히 유용합니다.react-native및)를 실시합니다 및 노드에서의 유닛테스트를 실시합니다.

A history에는 두 이 있습니다. 즉, 네비게이트 방법이 있습니다.push ★★★★★★★★★★★★★★★★★」replace...history로서 「」를 참조해 주세요.push하고, 「」는 「」로 합니다.replace어레이 내의 현재 위치를 새 위치로 바꿉니다.으로는 「」를 합니다.push메서드를 선택합니다.

의 리액트라우터에서는 인 리액트라우터를.historyinstance.단, 에서는 인스턴스 ", v4"가 됩니다.<BrowserRouter>,<HashRouter> , , , , 입니다.<MemoryRouter>컴포넌트가 브라우저, 해시 및 메모리인스턴스를 만듭니다.는 액액 react react react react の reacttiesties react react react react react react 의 속성과 메서드를 .history 가능한 와 관련된 .router★★★★★★ 。

. 1. 지만하다를 하세요.`withRouter`

withRouter는 ""를 합니다.history오브젝트를 컴포넌트의 지주로서 사용합니다.를 통해 " "에 수 있습니다.push ★★★★★★★★★★★★★★★★★」replace하지 context.

import { withRouter } from 'react-router-dom'
// this also works with react-router-native

const Button = withRouter(({ history }) => (
  <button
    type='button'
    onClick={() => { history.push('/new-location') }}
  >
    Click Me!
  </button>
))

하여 2. A로 합니다.`<Route>`

<Route>컴포넌트는 장소만 일치시키는 것이 아닙니다.패스가 없는 루트를 렌더링 할 수 있습니다.이 루트는 항상 현재 위치와 일치합니다.그<Route>합니다.withRouter '접근할 수 있어요'에 할 수 history의 메서드를 지정합니다.history

import { Route } from 'react-router-dom'

const Button = () => (
  <Route render={({ history}) => (
    <button
      type='button'
      onClick={() => { history.push('/new-location') }}
    >
      Click Me!
    </button>
  )} />
)

3. 콘텍스트 사용*

하지만 당신은 아마 하지 말아야 할 것이다.

마지막 옵션은 React의 컨텍스트 모델(React의 Context API는 v16에서 안정적임)을 사용하는 경우에만 사용해야 합니다.

const Button = (props, context) => (
  <button
    type='button'
    onClick={() => {
      // context.history.push === history.push
      context.history.push('/new-location')
    }}
  >
    Click Me!
  </button>
)

// you need to specify the context type so that it
// is available within the component
Button.contextTypes = {
  history: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired
  })
}

1과 2는 구현하기에 가장 간단한 선택이기 때문에 대부분의 사용 사례에서 이러한 방법이 최선의 선택입니다.

React-Router v6+의 답변

TL;DR: 새로운 기능을 사용할 수 있습니다.useNavigate

import { useNavigate } from "react-router-dom";

function Component() {
  let navigate = useNavigate();
  // Somewhere in your code, e.g. inside a handler:
  navigate("/posts"); 
}

useNavigate훅은 프로그래밍 탐색에 사용할 수 있는 함수를 반환합니다.

리액트 라우터의 매뉴얼 예시

import { useNavigate } from "react-router-dom";

function SignupForm() {
  let navigate = useNavigate();

  async function handleSubmit(event) {
    event.preventDefault();
    await submitForm(event.target);
    navigate("../success", { replace: true });
    // replace: true will replace the current entry in 
    // the history stack instead of adding a new one.

  }

  return <form onSubmit={handleSubmit}>{/* ... */}</form>;
}

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
};

React-Router 4.0.0 이상의 답변

4.0 이상에서는 이력을 컴포넌트의 지주로 사용합니다.

class Example extends React.Component {
   // use `this.props.history.push('/some/path')` here
};

의:this.props.history was was by by by by by by by by by by by by by by by by by by by by by by by by by by by by by에 의해 않은 경우에는 존재하지 않습니다.<Route>를 사용해 주세요.<Route path="..." component={YourComponent}/> 가지다this.props.history Your Component

React-Router 3.0.0 이상의 답변

3.0 이후에서는 라우터를 컴포넌트의 지주로서 사용합니다.

class Example extends React.Component {
   // use `this.props.router.push('/some/path')` here
};

React-Router 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
};

React-Router 2.0.0 이상의 답변

이 버전은 1.x와 하위 호환되므로 업그레이드 가이드는 필요 없습니다.예시를 살펴보는 것만으로도 충분할 겁니다.

「」, 「」가 .browserHistory 내의 할 수 .

import { browserHistory } from 'react-router'

브라우저 이력에 액세스 할 수 있게 되어 푸시, 치환 등의 작업을 할 수 있게 되었습니다.예를 들어 다음과 같습니다.

browserHistory.push('/some/path')

추가 정보:이력 및 내비게이션

React-Router 1.x.x 응답

자세한 내용은 설명하지 않겠습니다.자세한 내용은 업그레이드 가이드를 참조하십시오.

여기서의 질문에 대한 주요 변경 사항은NavigationHistory합니다.pushState()제부부이

다음은 Mixin을 사용한 예시입니다.

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

해 주세요.Historyrackt/history 프로젝트에서 가져옵니다.리액트-라우터 자체에서가 아니라

에) 는, 「Mixin」(「ES6」)로부터 할 수 .this.props.history. 에서할 수 있습니다.Router자녀 컴포넌트를 통해 props.

새로운 릴리스에 대한 자세한 내용은 1.0.x 매뉴얼을 참조하십시오.

여기 컴포넌트 외부 탐색에 대한 도움말 페이지가 있습니다.

것이 .history = createHistory()를 호출하고 있습니다.replaceState그 점에 대해서요.

React-Router 0.13.x 응답

저도 같은 문제에 휘말려서 리액트 라우터에 부속되어 있는 내비게이션 믹스인만으로 해결책을 찾을 수 있었습니다.

내가 한 방법은

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-Router-Redux라는 다른 프로젝트가 있습니다. React-Redux와 약간 동일한 접근 방식을 사용하여 ReactRouter의 바인딩을 줄일 수 있습니다.

React-Router-Redux에는 내부 작업 작성자에서 쉽게 탐색할 수 있는 몇 가지 메서드가 있습니다.이는 React Native에 기존 아키텍처를 가지고 있는 사용자에게 특히 유용할 수 있으며, 최소한의 보일러 플레이트 오버헤드로 React Web에서 동일한 패턴을 사용하고자 합니다.

다음 방법을 알아봅니다.

push(location)
replace(location)
go(number)
goBack()
goForward()

Redux-Thunk에서의 사용 예를 다음에 나타냅니다.

./action creators.displays

import { goBack } from 'react-router-redux'

export const onBackPress = () => (dispatch) => dispatch(goBack())

./viewcomponent.syslog

<button
  disabled={submitting}
  className="cancel_button"
  onClick={(e) => {
    e.preventDefault()
    this.props.onBackPress()
  }}
>
  CANCEL
</button>

리액트 라우터 v2

릴리즈의 ( 「」「」v2.0.0-rc5)의 권장 내비게이션 방법은 이력 싱글턴을 직접 누르는 것입니다.구성요소 외부 탐색 문서에서 이러한 작업을 확인할 수 있습니다.

React-Router 4.x 응답

저는 외부 컴포넌트도 휴대할 수 있는 하나의 이력 오브젝트를 가지고 싶습니다.필요에 따라 Import하여 조작하는 단일 history.js 파일이 좋습니다.

바꾸면 요.BrowserRouter[ Router ]( 「」) 할 수 있는 .원하는 대로 조작할 수 있는 자신의 이력 오브젝트를 가지고 있다는 점만 제외하면 아무것도 바뀌지 않습니다.

이력을 인스톨 할 필요가 있습니다.이러한 라이브러리는react-router.

사용 예, ES6 표기법:

history.disclosing

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

Basic Component.js

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>;
    }
}

Route다음과 같은 소품에서 이력에 액세스할 수도 있습니다.

Basic Component.js

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>;
    }
}

ES6를 사용하는 방법은 다음과 같습니다.react-router이치노

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
}

이 경우 서버 측을 제어하지 않으며 이로 인해 해시 라우터 v2를 사용하고 있습니다.

이력을 다른 파일(예: app_history.js ES6)에 저장합니다.

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

export default appHistory;

어디서든 사용할 수 있습니다!

리액트 라우터(app.js ES6)의 시작점:

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"]'));

컴포넌트(ES6) 내 내비게이션:

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()
  }
})

리액트 라우터 v6

한동안 React에 손을 대지 않았지만 Shimrit Snapir의 다음과 같은 코멘트에 감사드리며 강조하고 싶습니다.

on React-Router 6.0 <Redirect /> changed to <Navigate />

리액트 라우터 V4

tl:dr;

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

은 ''를.<Redirect to={URL} push={boolean} />와와와 setState()

push: boolean - 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>
    )
  }
}

여기에 완전한 예가 있습니다.자세한 것은 이쪽.

PS. 이 예에서는 ES7+ 속성 이니셜라이저를 사용하여 상태를 초기화합니다.관심 있으시면 여기도 보세요.

경고: 이 답변은 1.0 이전 버전의 ReactRouter만 대상으로 합니다.

이 답변은 1.0.0-rc1 사용 사례로 업데이트하겠습니다!

이것도 믹스인 없이 할 수 있어요.

let Authentication = React.createClass({
  contextTypes: {
    router: React.PropTypes.func
  },
  handleClick(e) {
    e.preventDefault();
    this.context.router.transitionTo('/');
  },
  render(){
    return (<div onClick={this.handleClick}>Click me!</div>);
  }
});

는 콘텍스트를 하지 않으면 할수.contextTypes수업 중에

문맥은 소품처럼 부모로부터 자녀에게 전해지는 물건이지만 매번 소품을 다시 닫지 않고 암묵적으로 전해지는 것이다.https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html 를 참조해 주세요.

가장 간단하고 깨끗한 방법은 다음과 같습니다(현재 React-Router 3.0.0 및 ES6).

리액트 라우터 3.x.x 와 ES6:

import { withRouter } from 'react-router';

class Example extends React.Component {
   // use `this.props.router.push('/some/path')` here
};

// Export the decorated class
export default withRouter(Example);

또는 기본 클래스가 아닌 경우 다음과 같이 내보냅니다.

withRouter(Example);
export { Example };

에서는 3.x.x의<Link>하고 있습니다.router.push할 수 있는 할 수 <Link to=★★★★

   this.props.router.push({pathname: '/some/path', query: {key1: 'val1', key2: 'val2'})'

프로그래밍 방식으로 네비게이션을 수행하려면 소품에 새로운 이력을 삽입해야 합니다.이력서component다음과 같은 방법으로 작업을 수행할 수 있습니다.

//using ES6
import React from 'react';

class App extends React.Component {

  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick(e) {
    e.preventDefault()
    /* Look at here, you can add it here */
    this.props.history.push('/redirected');
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>
          Redirect!!!
        </button>
      </div>
    )
  }
}

export default App;

ES6 + React 컴포넌트의 경우 다음과 같은 솔루션이 효과가 있었습니다.

저는 Felippe 스키너를 팔로우했지만, 저 같은 초보자를 돕기 위해 엔드 투 엔드 솔루션을 추가했습니다.

사용한 버전은 다음과 같습니다.

"contractions" : "^2.7.0"

"context" : "^15.3.1"

다음은 리액트 라우터를 사용한 프로그램 탐색을 사용한 리액트 구성 요소입니다.

import React from 'react';

class loginComp extends React.Component {
   constructor( context) {
    super(context);
    this.state = {
      uname: '',
      pwd: ''
    };
  }

  redirectToMainPage(){
        this.context.router.replace('/home');
  }

  render(){
    return <div>
           // skipping html code 
             <button onClick={this.redirectToMainPage.bind(this)}>Redirect</button>
    </div>;
  }
};

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

 module.exports = loginComp;

라우터의 설정을 다음에 나타냅니다.

 import { Router, Route, IndexRedirect, browserHistory } from 'react-router'

 render(<Router history={browserHistory}>
          <Route path='/' component={ParentComp}>
            <IndexRedirect to = "/login"/>
            <Route path='/login' component={LoginComp}/>
            <Route path='/home' component={HomeComp}/>
            <Route path='/repair' component={RepairJobComp} />
            <Route path='/service' component={ServiceJobComp} />
          </Route>
        </Router>, document.getElementById('root'));

최선의 방법은 아닐지 모르지만...react-router v4를 사용하면 다음과 같은 TypeScript 코드를 통해 아이디어를 얻을 수 있습니다.

에서는 예를 래래 in in in below below below 。LoginPage,router 할 수 있습니다. 콜하면 됩니다.router.transitionTo('/homepage')네비게이트 할 수 있습니다.

네비게이션 코드를 가져왔습니다.

"react-router": "^4.0.0-2", "react": "^15.3.1",

import Router from 'react-router/BrowserRouter';
import { History } from 'react-history/BrowserHistory';
import createHistory from 'history/createBrowserHistory';
const history = createHistory();

interface MatchWithPropsInterface {
  component: typeof React.Component,
  router: Router,
  history: History,
  exactly?: any,
  pattern: string
}

class MatchWithProps extends React.Component<MatchWithPropsInterface,any> {
  render() {
    return(
      <Match {...this.props} render={(matchProps) => (
             React.createElement(this.props.component, this.props)

        )}
       />
    )
  }
}

ReactDOM.render(
    <Router>
      {({ router }) => (
        <div>
          <MatchWithProps exactly pattern="/" component={LoginPage} router={router} history={history} />
          <MatchWithProps pattern="/login" component={LoginPage} router={router} history={history} />
          <MatchWithProps pattern="/homepage" component={HomePage} router={router} history={history} />
          <Miss component={NotFoundView} />
        </div>
      )}
    </Router>,

   document.getElementById('app')
);

React Router v4에서는 다음 두 가지 방법에 따라 프로그래밍 방식으로 라우팅합니다.

this.props.history.push("/something/something")
this.props.history.replace("/something/something")

넘버 투

이력 스택의 현재 엔트리를 바꿉니다.

소품으로 역사를 얻으려면 컴포넌트를 포장해야 할 수도 있습니다.

라우터와 함께

리액트 라우터 v6의 경우

import { useNavigate } from "react-router-dom";

function Invoices() {
  let navigate = useNavigate();
  return (
    <div>
      <NewInvoiceForm
        onSubmit={async event => {
          let newInvoice = await createInvoice(event.target);
          navigate(`/invoices/${newInvoice.id}`);
        }}
      />
    </div>
  );
}

리액트 라우터 v6의 시작

리액트 라우터 v4 및 ES6의 경우

하시면 됩니다.withRouter ★★★★★★★★★★★★★★★★★」this.props.history.push.

import {withRouter} from 'react-router-dom';

class Home extends Component {

    componentDidMount() {
        this.props.history.push('/redirect-to');
    }
}

export default withRouter(Home);

「」를 withRouter클래스 베이스의 컴포넌트에서는, 다음과 같은 것을 시험해 주세요.해, 「」를 사용하는 것을 잊지 말아 withRouter:

import { withRouter } from 'react-router-dom'

class YourClass extends React.Component {
  yourFunction = () => {
    doSomeAsyncAction(() =>
      this.props.history.push('/other_location')
    )
  }

  render() {
    return (
      <div>
        <Form onSubmit={ this.yourFunction } />
      </div>
    )
  }
}

export default withRouter(YourClass);

React-Router v4가 곧 출시될 예정이므로, 이를 위한 새로운 방법이 등장합니다.

import { MemoryRouter, BrowserRouter } from 'react-router';

const navigator = global && global.navigator && global.navigator.userAgent;
const hasWindow = typeof window !== 'undefined';
const isBrowser = typeof navigator !== 'undefined' && navigator.indexOf('Node.js') === -1;
const Router = isBrowser ? BrowserRouter : MemoryRouter;

<Router location="/page-to-go-to"/>

react-messages는 react-messages 사용/업데이트 방법을 보여주는 예제 앱으로, 앱을 탐색하는 예제 기능 테스트를 포함합니다.

José Antonio Postigo와 Ben Wheeler의 이전 답변을 바탕으로 합니다.

참신함?TypeScript로 작성되며 데코레이터 또는 정적 속성/필드를 사용합니다.

import * as React from "react";
import Component = React.Component;
import { withRouter } from "react-router";

export interface INavigatorProps {
    router?: ReactRouter.History.History;
}

/**
 * Note: goes great with mobx
 * @inject("something") @withRouter @observer
 */
@withRouter
export class Navigator extends Component<INavigatorProps, {}>{
    navigate: (to: string) => void;
    constructor(props: INavigatorProps) {
        super(props);
        let self = this;
        this.navigate = (to) => self.props.router.push(to);
    }
    render() {
        return (
            <ul>
                <li onClick={() => this.navigate("/home")}>
                    Home
                </li>
                <li onClick={() => this.navigate("/about")}>
                    About
                </li>
            </ul>
        )
    }
}

/**
 * Non decorated
 */
export class Navigator2 extends Component<INavigatorProps, {}> {

    static contextTypes = {
        router: React.PropTypes.object.isRequired,
    };

    navigate: (to: string) => void;
    constructor(props: INavigatorProps, context: any) {
        super(props, context);
        let s = this;
        this.navigate = (to) =>
            s.context.router.push(to);
    }
    render() {
        return (
            <ul>
                <li onClick={() => this.navigate("/home")}>
                    Home
                </li>
                <li onClick={() => this.navigate("/about")}>
                    About
                </li>
            </ul>
        )
    }
}

오늘 npm이 설치되어 있는 모든 것을 사용해 주세요.

: 및 "contractions" : "^3.0.0" »
"^"@types/filename": "^2.0.41"

v6 를 하고 있는 는, 「React Router v6 」를 해 주세요.useNavigateprovided hook에서 react-router.

이 후크를 사용한 내비게이션은 매우 간단합니다.

import { generatePath, useNavigate } from 'react-router';

navigate(-1); // navigates back
navigate('/my/path'); // navigates to a specific path
navigate(generatePath('my/path/:id', { id: 1 })); // navigates to a dynamic path, generatePath is very useful for url replacements

최신 리액트 라우터용 v6

useHistory(), 로로었 is is is is로 바뀝니다.useNavigate().

다음을 사용해야 합니다.

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/your-page-link');

버전(에서는 React(15.3)가 사용됩니다.this.props.history.push('/location');작동했지만 다음과 같은 경고가 표시되었습니다.

경고: [browser.js:49 경고: [react-router]props.history ★★★★★★★★★★★★★★★★★」context.history을 사용하다★★★★★★를 사용해 .context.router.

그래서 제가 그걸 풀었는데context.router음음음같 뭇매하다

import React from 'react';

class MyComponent extends React.Component {

    constructor(props) {
        super(props);
        this.backPressed = this.backPressed.bind(this);
    }

    backPressed() {
        this.context.router.push('/back-location');
    }

    ...
}

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

export default MyComponent;

후크를 사용한 리액트 라우터 v6

import {useNavigate} from 'react-router-dom';
let navigate = useNavigate();
navigate('home');

그리고 브라우저 기록을 이동하려면

navigate(-1); ---> Go back
navigate(1);  ---> Go forward
navigate(-2); ---> Move two steps backward.

해시 또는 브라우저 기록을 사용하는 경우 다음을 수행할 수 있습니다.

hashHistory.push('/login');
browserHistory.push('/login');

리액트 라우터 V4

버전 4를 사용하고 있다면 내 라이브러리(쉐임리스 플러그)를 사용하여 액션을 디스패치하기만 하면 모든 것이 정상적으로 동작합니다.

dispatch(navigateTo("/aboutUs"));

트립플러

React Router v4에서 이 기능을 구현하는 데 문제가 있는 사용자.

다음은 redex 액션에서 React 앱을 탐색하기 위한 작업 솔루션입니다.

파일 이력.js

import createHistory from 'history/createBrowserHistory'

export default createHistory()

파일 App.js/Route.jsx

import { Router, Route } from 'react-router-dom'
import history from './history'
...
<Router history={history}>
 <Route path="/test" component={Test}/>
</Router>

파일 *another_file.js 또는 redux 파일

import history from './history'

history.push('/test') // This should change the URL and rerender Test component

모두 GitHub 코멘트 덕분입니다.React Training issues 코멘트

상태 비저장 구성 요소에서 후크를 사용할 수도 있습니다.문서의 예:

import { useHistory } from "react-router"

function HomeButton() {
  const history = useHistory()

  return (
    <button type="button" onClick={() => history.push("/home")}>
      Go home
    </button>
  )
}

주의: 후크가 에 추가되어 있으며,react@>=16.8

클래스 기반 구성 요소를 프로그래밍 방식으로 탐색합니다.

import { Redirect } from "react-router-dom";

class MyComponent extends React.Component{
    state = {rpath: null}

    const goTo = (path) => this.setState({rpath: path});

    render(){
        if(this.state.rpath){
            return <Redirect to={this.state.rpath}/>
        }
        .....
        .....
    }
}

제 답변에는 루트로 프로그래밍 방식으로 리다이렉트하는 방법이 3가지 있습니다.일부 솔루션은 이미 제시되어 있지만, 다음 솔루션은 추가 데모 애플리케이션이 있는 기능 컴포넌트에만 초점을 맞춥니다.

다음 버전 사용:

반응: 16.13.1

리액트돔: 16.13.1

반응 속도: 5.2.0

react-flash-dom: 5.2.0

타입 스크립트: 3.7.2

설정:

이 은 그, 선, 루, 루를 사용하고 .HashRouter 과 같이 합니다.

<HashRouter>
    // ... buttons for redirect

    <Switch>
      <Route exact path="/(|home)" children={Home} />
      <Route exact path="/usehistory" children={UseHistoryResult} />
      <Route exact path="/withrouter" children={WithRouterResult} />
      <Route exact path="/redirectpush" children={RedirectPushResult} />
      <Route children={Home} />
    </Switch>
</HashRouter>

에 관한 매뉴얼에서<HashRouter>:

A <Router> 부분()을 합니다.window.location.hashUI URL 입니다.

솔루션:

「」를 사용합니다.<Redirect>useState:

기능 RedirectPushAction컴포넌트(저장소의 컴포넌트)를 사용하여 리다이렉트를 처리할 수 있습니다.어려운 점은 리다이렉션이 이루어졌을 때redirect 말하다false여 . . . .setTimeOut0가 커밋할 입니다.Redirect다음 번에 사용하기 위해 버튼을 돌려받을 수 있습니다.

아래에 예를 제시하겠습니다.

const [redirect, setRedirect] = useState(false);
const handleRedirect = useCallback(() => {
    let render = null;
    if (redirect) {
        render = <Redirect to="/redirectpush" push={true} />

        // In order wait until committing to the DOM
        // and get back the button for clicking next time
        setTimeout(() => setRedirect(false), 0);
    }
    return render;
}, [redirect]);

return <>
    {handleRedirect()}
    <button onClick={() => setRedirect(true)}>
        Redirect push
    </button>
</>

문서부터:

「」의 렌더링<Redirect>을 사용하다서버측의 리다이렉트(HTTP 3xx)와 같이, 새로운 로케이션은 이력 스택내의 현재의 로케이션을 덮어씁니다.

「」를 사용합니다.useHistory 삭제:

솔루션에는 다음과 같은 컴포넌트가 있습니다.

let history = useHistory();

return <button onClick={() => { history.push('/usehistory') }}>
    useHistory redirect
</button>

useHistory훅을 사용하면 이력 오브젝트에 접근할 수 있습니다.이 오브젝트는 루트를 프로그래밍 방식으로 탐색하거나 변경할 수 있습니다.

용 사?withRouter, , get the , 를 입수합니다.history부에서props:

라는 이름의 컴포넌트를 작성했습니다.다음과 같이 표시됩니다.

const WithRouterAction = (props:any) => {
    const { history } = props;

    return <button onClick={() => { history.push('/withrouter') }}>
        withRouter redirect
    </button>
}

export default withRouter(WithRouterAction);

설명서에서 읽은 내용

You can get access to the 에 액세스 할 수 있습니다.history object's properties and the closest 개체의 속성 및 가장 가까운 속성<Route>'s match via the 를 경유하여 일치시킵니다.withRouter고차 컴포넌트 withRouter된 「갱신된」을 통과합니다.match,location , , , , 입니다.history렌더링할 때마다 포장된 컴포넌트에 소품을 장착합니다.

데모:

더 잘 표현하기 위해 아래 예시로 GitHub 저장소를 구축했습니다.

리액트 라우터의 프로그래밍 리다이렉트 예시

정답은 글을 쓸 당시 나에게 있었다.

this.context.router.history.push('/');

단, PropType을 컴포넌트에 추가해야 합니다.

Header.contextTypes = {
  router: PropTypes.object.isRequired
}
export default Header;

PropTypes Import 잊지 마세요.

import PropTypes from 'prop-types';

최적의 솔루션은 아닐 수도 있지만, 이 솔루션은 다음과 같은 작업을 수행할 수 있습니다.

import { Link } from 'react-router-dom';

// Create functional component Post
export default Post = () => (
    <div className="component post">

        <button className="button delete-post" onClick={() => {
            // ... delete post
            // then redirect, without page reload, by triggering a hidden Link
            document.querySelector('.trigger.go-home').click();
        }}>Delete Post</button>

        <Link to="/" className="trigger go-home hidden"></Link>

    </div>
);

기본적으로 1개의 액션(이 경우는 삭제 후)에 연결된 로직은 리다이렉트 트리거를 호출합니다.이것은 이상적이지 않습니다.필요할 때 편리하게 호출할 수 있도록 마크업에 DOM 노드를 '트리거'로 추가합니다.또한 리액트 컴포넌트에서는 바람직하지 않을 수 있는 DOM과 직접 대화합니다.

단, 이러한 유형의 리다이렉트는 그다지 자주 필요하지 않습니다.따라서 컴포넌트 마크업에서 한두 개의 숨겨진 링크가 추가되어도 큰 문제는 없습니다.특히 의미 있는 이름을 붙이는 경우.

react-router-redux를 통해 RR4와 redux를 쌍으로 하는 경우, 에서 라우팅 액션 작성자를 사용하여react-router-redux옵션이기도 합니다.

import { push, replace, ... } from 'react-router-redux'

class WrappedComponent extends React.Component {
  handleRedirect(url, replaceState = true) {
    replaceState
      ? this.props.dispatch(replace(url))
      : this.props.dispatch(push(url))
  }
  render() { ... }
}

export default connect(null)(WrappedComponent)

redux thunk/saga를 사용하여 비동기 흐름을 관리하는 경우 위의 작업 작성자를 redux 액션으로 Import하고 mapDispatchToProps를 사용하여 react 컴포넌트에 후크하는 것이 좋습니다.

언급URL : https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router

'programing' 카테고리의 다른 글

GSON을 사용한 JSON 파일 해석 (0)	2023.03.29
개체를 인코딩 가능한 개체로 변환하지 못했습니다. (0)	2023.03.29
Spring 부트버전 2.1.4에서 2.1.5로 변경하면 알 수 없는 설정 Maven 오류가 발생하는 이유는 무엇입니까? (0)	2023.03.29
워드프레스 개발 및 도입 자동화 (0)	2023.03.29
앵귤러 컨트롤러로부터의 트위터 부트스트랩모달 닫기 (0)	2023.03.29

현재글React 라우터를 사용하여 프로그래밍 방식으로 탐색

각종 프로그래밍 정보를 다루는 블로그입니다.

typeScript, git, asp.net, Wordpress, iphone, MongoDB, MySQL, C, Excel, Python, sql-server, Bash, oracle, spring-boot, AJAX, powershell, MariaDB, AngularJS, Android, jQuery,

Today :
Yesterday :

padding

React 라우터를 사용하여 프로그래밍 방식으로 탐색

React 라우터를 사용하여 프로그래밍 방식으로 탐색

. 1. 지만하다를 하세요.`withRouter`

하여 2. A로 합니다.`<Route>`

3. 콘텍스트 사용*

React-Router 4.x 응답

리액트 라우터 v6

리액트 라우터 V4

파일 이력.js

파일 App.js/Route.jsx

파일 *another_file.js 또는 redux 파일

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

React 라우터를 사용하여 프로그래밍 방식으로 탐색

React 라우터를 사용하여 프로그래밍 방식으로 탐색

. 1. 지만하다를 하세요.withRouter

하여 2. A로 합니다.<Route>

3. 콘텍스트 사용*

React-Router 4.x 응답

리액트 라우터 v6

리액트 라우터 V4

파일 이력.js

파일 App.js/Route.jsx

파일 *another_file.js 또는 redux 파일

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바

. 1. 지만하다를 하세요.`withRouter`

하여 2. A로 합니다.`<Route>`