React Router v4'te Tarihe nasıl geçilir?

React Router'ın (v3) geçerli sürümünde bir sunucu yanıtını kabul edebilir browserHistory.pushve uygun yanıt sayfasına gitmek için kullanabilirim . Ancak, bu v4'te mevcut değildir ve bunu işlemek için uygun yolun ne olduğundan emin değilim.

Bu örnekte, kullanıcı formu gönderdiğinde, Redux'u kullanan Components / app-product-form.js çağrı this.props.addProduct(props)yapar. Sunucu bir başarı döndürdüğünde, kullanıcı Sepet sayfasına yönlendirilir.

// actions/index.js
export function addProduct(props) {
  return dispatch =>
    axios.post(`${ROOT_URL}/cart`, props, config)
      .then(response => {
        dispatch({ type: types.AUTH_USER });
        localStorage.setItem('token', response.data.token);
        browserHistory.push('/cart'); // no longer in React Router V4
      });
}

React Router v4 işlevinden Sepet sayfasına nasıl yönlendirme yapabilirim?

historyYöntemleri bileşenlerinizin dışında kullanabilirsiniz . Aşağıdaki şekilde deneyin.

İlk olarak, geçmiş paketinihistory kullanan bir nesne oluşturun :

// src/history.js

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

Sonra içine sarın <Router>( lütfenimport { Router } yerine kullanmanız gerektiğini unutmayınimport { BrowserRouter as Router } ):

// src/index.jsx

// ...
import { Router, Route, Link } from 'react-router-dom';
import history from './history';

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/login">Login</Link></li>
        </ul>
        <Route exact path="/" component={HomePage} />
        <Route path="/login" component={LoginPage} />
      </div>
    </Router>
  </Provider>,
  document.getElementById('root'),
);

Geçerli konumunuzu herhangi bir yerden değiştirin, örneğin:

// src/actions/userActionCreators.js

// ...
import history from '../history';

export function login(credentials) {
  return function (dispatch) {
    return loginRemotely(credentials)
      .then((response) => {
        // ...
        history.push('/');
      });
  };
}

UPD : React Router SSS'de biraz farklı bir örnek de görebilirsiniz .

React Router v4 temel olarak v3'ten (ve daha eski) farklıdır ve browserHistory.push()alıştığınız gibi yapamazsınız.

Daha fazla bilgi istiyorsanız bu tartışma ilgili görünüyor:

• Yeni bir tarih oluşturmak browserHistoryişe yaramaz çünkü <BrowserRouter>kendi geçmiş örneğini oluşturur ve bu durumdaki değişiklikleri dinler. Farklı bir örnek URL'yi değiştirir, ancak<BrowserRouter> .
• browserHistory v4'te tepki yönlendirici tarafından değil, yalnızca v2'de görünür.

Bunun yerine bunu yapmak için birkaç seçeneğiniz vardır:

• Kullanım withRouteryüksek mertebeden bileşeni

  Bunun yerine withRouteryüksek dereceli bileşeni kullanmanız ve bunu geçmişe itecek bileşene sarmanız gerekir. Örneğin:

  import React from "react";
  import { withRouter } from "react-router-dom";
  
  class MyComponent extends React.Component {
    ...
    myFunction() {
      this.props.history.push("/some/Path");
    }
    ...
  }
  export default withRouter(MyComponent);

  Check out resmi belgelere daha fazla bilgi için:

  Sen erişebilirsiniz historynesnenin özellikleri ve en yakın <Route>'s matchwithRouter Üst düzey bileşeni aracılığıyla. olarak withRouter onun bileşenini rota aynı sahne ile her değiştirdiğinde tekrar verecek <Route>sahne işlemek: { match, location, history }.

• Kullanım contextAPI

  Bağlamı kullanmak en kolay çözümlerden biri olabilir, ancak deneysel bir API olduğu için kararsız ve desteklenmez. Sadece her şey başarısız olduğunda kullanın. İşte bir örnek:

  import React from "react";
  import PropTypes from "prop-types";
  
  class MyComponent extends React.Component {
    static contextTypes = {
      router: PropTypes.object
    }
    constructor(props, context) {
       super(props, context);
    }
    ...
    myFunction() {
      this.context.router.history.push("/some/Path");
    }
    ...
  }

  Bağlam ile ilgili resmi belgelere göz atın :

  Uygulamanızın kararlı olmasını istiyorsanız, bağlam kullanmayın. Deneysel bir API ve gelecekteki React sürümlerinde kırılması muhtemeldir.

  Bu uyarılara rağmen bağlam kullanmak konusunda ısrar ediyorsanız, bağlam kullanımınızı küçük bir alana ayırmaya çalışın ve API değiştiğinde yükseltmenin daha kolay olması için bağlam API'sını doğrudan mümkün olduğunca kullanmaktan kaçının.

Şimdi tepki yönlendirici v5 ile useHistory yaşam döngüsü kancasını şu şekilde kullanabilirsiniz:

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

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

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

daha fazla bilgi için: https://reacttraining.com/react-router/web/api/Hooks/usehistory

React Router 4'te en basit yol

this.props.history.push('/new/url');

Ancak bu yöntemi kullanmak için mevcut bileşeninizin historynesneye erişimi olmalıdır . İle erişebiliriz

1. Bileşeniniz Routedoğrudan bağlıysa, bileşeninizin zaten historynesneye erişimi vardır .

   Örneğin:

   <Route path="/profile" component={ViewProfile}/>

   Buradan ViewProfileerişimi var history.

2. RouteDoğrudan bağlı değilse .

   Örneğin:

   <Route path="/users" render={() => <ViewUsers/>}

   Sonra withRouter, mevcut bileşeni çarpıtmak için daha yüksek bir sipariş işlevi kullanmalıyız.

   İç ViewUsers bileşen

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

   • export default withRouter(ViewUsers);

   İşte bu kadar, ViewUsersbileşeninizin historynesneye erişimi var .

GÜNCELLEME

2- bu senaryoda, tüm rotayı propsbileşeninize aktarın ve ardından this.props.historybirHOC

Örneğin:

<Route path="/users" render={props => <ViewUsers {...props} />}

Ben böyle yaptım:

import React, {Component} from 'react';

export default class Link extends Component {
    constructor(props) {
        super(props);
        this.onLogout = this.onLogout.bind(this);
    }
    onLogout() {
        this.props.history.push('/');
    }
    render() {
        return (
            <div>
                <h1>Your Links</h1>
                <button onClick={this.onLogout}>Logout</button>
            </div>
        );
    }
}

this.props.history.push('/cart');Geçmiş sayfasına kaydedilecek alışveriş sepeti sayfasına yönlendirmek için kullanın .

Zevk al, Michael.

Göre Yönlendirici v4 belgelerine Tepki - Redux Derin Entegrasyon oturumu

Derin entegrasyon aşağıdakiler için gereklidir:

"eylem göndererek gezinebilir"

Ancak, bu yaklaşımı "derin entegrasyon" a alternatif olarak öneriyorlar:

"Gezinmek için eylemler göndermek yerine, bileşenleri eylemlerinize yönlendirmek ve orada gezinmek için sağlanan geçmiş nesnesini iletebilirsiniz."

Böylece bileşeninizi withRouter yüksek sipariş bileşeniyle sarabilirsiniz:

export default withRouter(connect(null, { actionCreatorName })(ReactComponent));

geçmiş API'sini sahne alanlarına geçirir. Böylece geçmişi yaratan aksiyon yaratıcısını bir param olarak adlandırabilirsiniz. Örneğin, ReactComponent'inizin içinde:

onClick={() => {
  this.props.actionCreatorName(
    this.props.history,
    otherParams
  );
}}

Ardından, eylemlerinizin / index.js içinde:

export function actionCreatorName(history, param) {
  return dispatch => {
    dispatch({
      type: SOME_ACTION,
      payload: param.data
    });
    history.push("/path");
  };
}

Kötü soru, beni oldukça zaman aldı, ama sonunda, bu şekilde çözdüm:

Konteynırınızı sarın withRouterve geçmişi mapDispatchToPropsişlevinize eyleminize aktarın . Eylemde gezinmek için history.push ('/ url') kullanın.

Aksiyon:

export function saveData(history, data) {
  fetch.post('/save', data)
     .then((response) => {
       ...
       history.push('/url');
     })
};

Konteyner:

import { withRouter } from 'react-router-dom';
...
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    save: (data) => dispatch(saveData(ownProps.history, data))}
};
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Container));

Bu, React Router v4.x için geçerlidir .

this.context.history.push çalışmayacak.

Ben itme böyle çalışmayı başardı:

static contextTypes = {
    router: PropTypes.object
}

handleSubmit(e) {
    e.preventDefault();

    if (this.props.auth.success) {
        this.context.router.history.push("/some/Path")
    }

}

Bu durumda sahne donanımını bagajınıza geçiriyorsunuz. Böylece sadece

props.history.push('/cart')

Durum böyle değilse, bileşeninizden geçmiş iletmeye devam edebilirsiniz

export function addProduct(data, history) {
  return dispatch => {
    axios.post('/url', data).then((response) => {
      dispatch({ type: types.AUTH_USER })
      history.push('/cart')
    })
  }
}

Başka biri için değerli olması durumunda bir çözüm daha öneririm.

history.jsAşağıdakilere sahip olduğum bir dosya var:

import createHistory from 'history/createBrowserHistory'
const history = createHistory()
history.pushLater = (...args) => setImmediate(() => history.push(...args))
export default history

Daha sonra, yönlendiricimi tanımladığım Kökümde aşağıdakileri kullanıyorum:

import history from '../history'
import { Provider } from 'react-redux'
import { Router, Route, Switch } from 'react-router-dom'

export default class Root extends React.Component {
  render() {
    return (
     <Provider store={store}>
      <Router history={history}>
       <Switch>
        ...
       </Switch>
      </Router>
     </Provider>
    )
   }
  }

Son olarak, actions.jsGeçmişimi içe aktarıyorum ve pushLater'dan yararlanıyorum

import history from './history'
export const login = createAction(
...
history.pushLater({ pathname: PATH_REDIRECT_LOGIN })
...)

Bu şekilde API çağrılarından sonra yeni işlemlere geçebilirim.

Umarım yardımcı olur!

Redux kullanıyorsanız, o zaman npm paketi reaktif yönlendirici-redux kullanmanızı tavsiye ederim . Redux mağazası gezinme eylemlerini göndermenizi sağlar.

Benioku dosyasında açıklandığı gibi mağaza oluşturmanız gerekir .

En kolay kullanım durumu:

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

this.props.dispatch(push('/second page'));

Konteyner / Komponent ile ikinci kullanım çantası:

Konteyner:

import { connect } from 'react-redux';
import { push } from 'react-router-redux';

import Form from '../components/Form';

const mapDispatchToProps = dispatch => ({
  changeUrl: url => dispatch(push(url)),
});

export default connect(null, mapDispatchToProps)(Form);

Bileşen:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class Form extends Component {
  handleClick = () => {
    this.props.changeUrl('/secondPage');
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}/>
      </div>Readme file
    );
  }
}

Bunu kullanarak başarabildim bind(). Bir düğmeyi tıklatmak index.jsx, sunucuya bazı veriler göndermek, yanıtı değerlendirmek ve yönlendirme yapmak istedim success.jsx. İşte böyle çalıştım ...

index.jsx:

import React, { Component } from "react"
import { postData } from "../../scripts/request"

class Main extends Component {
    constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this)
        this.postData = postData.bind(this)
    }

    handleClick() {
        const data = {
            "first_name": "Test",
            "last_name": "Guy",
            "email": "test@test.com"
        }

        this.postData("person", data)
    }

    render() {
        return (
            <div className="Main">
                <button onClick={this.handleClick}>Test Post</button>
            </div>
        )
    }
}

export default Main

request.js:

import { post } from "./fetch"

export const postData = function(url, data) {
    // post is a fetch() in another script...
    post(url, data)
        .then((result) => {
            if (result.status === "ok") {
                this.props.history.push("/success")
            }
        })
}

success.jsx:

import React from "react"

const Success = () => {
    return (
        <div className="Success">
            Hey cool, got it.
        </div>
    )
}

export default Success

Yani bağlanarak thisiçin postDatade index.jsx, erişmeye başardı this.props.historyiçinde request.jssadece emin ben eklemeyi unutmayın yapmak zorunda, ... o zaman farklı bileşenler bu işlevi yeniden kullanabilirsiniz this.postData = postData.bind(this)içinde constructor().

İşte benim kesmek (bu benim root-seviyesi dosya, orada biraz redux ile karışık - kullanmama rağmen react-router-redux):

const store = configureStore()
const customHistory = createBrowserHistory({
  basename: config.urlBasename || ''
})

ReactDOM.render(
  <Provider store={store}>
    <Router history={customHistory}>
      <Route component={({history}) => {
        window.appHistory = history
        return (
          <App />
        )
      }}/>
    </Router>
  </Provider>,
  document.getElementById('root')
)

Sonra window.appHistory.push()istediğim her yerde kullanabilirsiniz (örneğin, benim redux mağaza fonksiyonları / thunks / sagas, vb) Ben sadece kullanabileceğini umuyordu window.customHistory.push()ama react-routerurl değişti bile bir nedenle güncelleme gibi görünmüyordu. Ama bu şekilde EXACT örneği react-routerkullanır. Küresel kapsamda bir şeyler koymaktan hoşlanmıyorum ve bu, bunu yapacağım birkaç şeyden biri. Ama IMO'yu gördüğüm diğer alternatiflerden daha iyi.

Geri Arama'yı kullanın. Benim için çalıştı!

export function addProduct(props, callback) {
  return dispatch =>
    axios.post(`${ROOT_URL}/cart`, props, config)
    .then(response => {
    dispatch({ type: types.AUTH_USER });
    localStorage.setItem('token', response.data.token);
    callback();
  });
}

Bileşende, geri aramayı eklemeniz yeterlidir

this.props.addProduct(props, () => this.props.history.push('/cart'))

bu yüzden bunu yapmanın yolu: - kullanarak yeniden yönlendirmek yerine, history.pushsadece Redirectbileşen react-router-dom kullanıyorum Bu bileşeni kullanırken sadece geçebilirsiniz push=trueve gerisini halleder

import * as React from 'react';
import { Redirect } from 'react-router-dom';
class Example extends React.Component {
  componentDidMount() {
    this.setState({
      redirectTo: '/test/path'
    });
  }

  render() {
    const { redirectTo } = this.state;

    return <Redirect to={{pathname: redirectTo}} push={true}/>
  }
}

Reaksiyon yönlendirici V4 artık geçmiş prop'in aşağıdaki gibi kullanılmasına izin veriyor:

this.props.history.push("/dummy",value)

Daha sonra bu değere, konum desteği state:{value}bileşen durumu olarak kullanılabildiği her yerde erişilebilir .

giriş ve manny farklı şeyler için yaptığım gibi bunu kullanabilirsiniz

class Login extends Component {
  constructor(props){
    super(props);
    this.login=this.login.bind(this)
  }


  login(){
this.props.history.push('/dashboard');
  }


render() {

    return (

   <div>
    <button onClick={this.login}>login</login>
    </div>

)

/*Step 1*/
myFunction(){  this.props.history.push("/home"); }
/**/
 <button onClick={()=>this.myFunction()} className={'btn btn-primary'}>Go 
 Home</button>

birinci adım uygulamanızı Router'a sarın

import { BrowserRouter as Router } from "react-router-dom";
ReactDOM.render(<Router><App /></Router>, document.getElementById('root'));

Şimdi tüm Uygulamam BrowserRouter'a erişebilecek. İkinci adım Güzergahı içe aktarıyorum ve ardından bu destekleri geçiyorum. Muhtemelen ana dosyalarınızdan birinde.

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

//lots of code here

//somewhere in my render function

    <Route
      exact
      path="/" //put what your file path is here
      render={props => (
      <div>
        <NameOfComponent
          {...props} //this will pass down your match, history, location objects
        />
      </div>
      )}
    />

Şimdi bileşen js dosyamda console.log (this.props) çalıştırırsam, şöyle bir şey almalıyım

{match: {…}, location: {…}, history: {…}, //other stuff }

Adım 2 Konumumu değiştirmek için geçmiş nesnesine erişebilirim

//lots of code here relating to my whatever request I just ran delete, put so on

this.props.history.push("/") // then put in whatever url you want to go to

Ayrıca ben sadece bir kodlama bootcamp öğrencisiyim, bu yüzden uzman değilim, ama aynı zamanda

window.location = "/" //wherever you want to go

Yanılıyorsam beni düzeltin, ama bunu test ettiğimde React kullanımının tüm noktasını yendiğini düşündüğüm tüm sayfayı yeniden yükledi.

Özel oluştur RouterKendine aitbrowserHistory :

import React from 'react';
import { Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';

export const history = createBrowserHistory();

const ExtBrowserRouter = ({children}) => (
  <Router history={history} >
  { children }
  </Router>
);

export default ExtBrowserRouter

Ardından, Kökünüzde Router aşağıdakileri kullanın:

import React from 'react';       
import { /*BrowserRouter,*/ Route, Switch, Redirect } from 'react-router-dom';

//Use 'ExtBrowserRouter' instead of 'BrowserRouter'
import ExtBrowserRouter from './ExtBrowserRouter'; 
...

export default class Root extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <ExtBrowserRouter>
          <Switch>
            ...
            <Route path="/login" component={Login}  />
            ...
          </Switch>
        </ExtBrowserRouter>
      </Provider>
    )
  }
}

Son olarak, historyihtiyacınız olan yere aktarın ve kullanın:

import { history } from '../routers/ExtBrowserRouter';
...

export function logout(){
  clearTokens();      
  history.push('/login'); //WORKS AS EXPECTED!
  return Promise.reject('Refresh token has expired');
}

Bir işlevi bir Bileşenin pervanesine bir değer olarak iletirken geçmişi kullanmak istiyorsanız, tepki yönlendiricisi 4 ile historypervaneyi <Route/>Bileşenin oluşturma özniteliğinde yapılandırabilir ve ardındanhistory.push()

    <Route path='/create' render={({history}) => (
      <YourComponent
        YourProp={() => {
          this.YourClassMethod()
          history.push('/')
        }}>
      </YourComponent>
    )} />

Not: Bunun çalışması için React Router'ın BrowserRouter Bileşenini kök bileşeninizin etrafına sarmalısınız (örn. İndex.js dosyasında olabilir)