Reaktif yönlendirici ile giriş yaptıktan sonra otomatik yönlendirme

Tepki/Yanıtla yönlendirici/akı uygulamasına bir Facebook girişi yapmak istedim. Giriş etkinliğine kayıtlı bir dinleyici sahibim ve giriş yapmışlarsa kullanıcıyı '/ dashboard' 'a yönlendirmek istiyorum. Bunu nasıl yapabilirim? Sayfayı yeniden yükledikten sonra location.push çok iyi çalışmadı.

45
@PaulRoub Bu soruya, bağlantı kurduğunuz sorudan önce birkaç ay soruldu. Onun bir kopyası olduğunu düşünmüyorum
katma yazar Tyrsius, kaynak

7 cevap

Yönlendirici Yönlendiricisi v3

Bu benim işim

var Router = require('react-router');
Router.browserHistory.push('/somepath');

Yönlendirici Yönlendiricisi v4

Now we can use the component in React Router v4.

Rendering a will navigate to a new location. The new location will override the current location in the history stack, like server-side redirects.

import React, { Component } from 'react';
import { Redirect } from 'react-router';
export default class LoginComponent extends Component {
    render(){
        if(this.state.isLoggedIn === true){
            return ();
        }else{
            return (<div>Login Please</div>);
        }
    }
}

Documentation https://reacttraining.com/react-router/web/api/Redirect

28
katma
Noob biri belki, ama var Yönlendirici = gerektirir ('tepki-yönlendirici') olarak Router'ı 'yönlendirici yönlendiriciden' alma nedenini merak ediyorum ('tepki-yönlendirici'); yapar.
katma yazar Ben, kaynak
@Philll_t bileşenleri için withRouter dekoratörünü kullanın.
katma yazar Stanislav Mayorov, kaynak
@Ben 'tepki-yönlendiriciden' {Router} içe aktarma kullanmanız gerekir
katma yazar anoop, kaynak
@Ben Ancak bu durumda, 'tepki-yönlendiriciden' import {browserHistory} olarak kullanmanız gerekir
katma yazar anoop, kaynak
Ya hash tarihini kullanıyorsanız?
katma yazar Philll_t, kaynak
ithalat ES2015 lehçesinden.
katma yazar werqious, kaynak

Reaktif Yönlendiricisi v0.13

Yönlendirici örneği: "href="https://github.com/rackt/react-router/blob/master/docs/api/create.md" rel="nofollow noreferrer">" Router.create çevreden geçirilebilir (ya da bir React bileşeninin içinde varsa, bunu bağlam nesnesi ) ve yöntemleri içerir gibi transitionTo .

16
katma
Üzgünüz, bu kırık linkleri güncellemeyi denedim - ama bu gerçekten React Router v4 için geçerli değil ve ben kesinlikle yeniden yazmak için en iyi yol emin değilim
katma yazar icc97, kaynak
api belgeleri kaldırıldığı için bağlantılar kesilir, referans için github.com/rackt/react-router/tree/…
katma yazar individuo7, kaynak
@DanielSchmidt transitionTo belgelerine bir göz attınız mı? Birkaç örnek gösterir. Muhtemelen router.transitionTo ('/ dashboard') yapardınız
katma yazar Michelle Tilley, kaynak
Cevap için teşekkürler! Bir rotayı nasıl geçeceğimi bir örnek biliyor musunuz?
katma yazar Daniel Schmidt, kaynak
Bu konuda tartışmak tepki ile ilgili bir sorun var. github.com/rackt/react-router/issues/975 Bu çözüldü 0.13.1 ve React Router'a Tepki 0.13.2'ye güncellenerek
katma yazar almoraleslopez, kaynak
Bu yanıt için teşekkürler, bileşen yaşam döngüsünde bu yöntemi kullanarak bir yönlendirme başlatmalıyız?
katma yazar Sam P, kaynak

Reaktif Yönlendiricisi v2

Soru zaten cevaplanmış olsa da, bence burada verilen çözümlerin hiçbiri ele alınmadığı için benim için işe yarayan çözümü yayınlamak önemli.

Öncelikle LoginForm bileşenimin yönlendirici içeriğini kullanıyorum

LoginForm.contextTypes = {
  router: React.PropTypes.object
};

Bundan sonra LoginForm bileşenimin içindeki yönlendirici nesnesine erişebilirim

handleLogin() {
  this.context.router.push('/anotherroute');
}

PS: React-router sürüm 2.6.0 üzerinde çalışıyor

11
katma
Kodun içinde LoginForm.contextTypes = {yönlendirici: React.PropTypes.object}; kodunu nereye eklersiniz?
katma yazar Philll_t, kaynak
Bu uyarılara rağmen bağlam kullanmayı tercih ediyorsanız, bağlam kullanımını küçük bir alana ayırmaya çalışın ve API'yi değiştirdiğinde daha kolay yükseltilebilmesi için bağlam API'sini mümkün olduğunca doğrudan kullanmaktan kaçının. doc bu yüzden Bağlam kullanmak iyidir?
katma yazar Yogesh Patel, kaynak

Mağazanızda:

data.router.transitionTo('user');

Ve yönlendirici vardır:

"Route name="user" handler={User}"

Kullanıcı, rota işleyicisidir

9
katma
data </​​code> nedir?
katma yazar Marian, kaynak

Yönlendirici Yönlendiricisi v3

Bileşenlerin Dışında Gezinme

Router ile uygulamanızı bu şekilde oluşturun

// Your main file that renders a :
import { Router, browserHistory } from 'react-router'
import routes from './app/routes'

render(
  ,
  mountNode
)

Bir Redux katman yazılımı veya Flux eylemi gibi bir yer:

import { browserHistory } from 'react-router'

// Go to /some/path.
browserHistory.push('/some/path')

// Go back to previous location.
browserHistory.goBack()

tepki-yönlendirici/ağaç/v3/dokümanlar

3
katma

Reaktif Yönlendiricisi v4.2.0

I am using React-16.2.0 & React-router-4.2.0

And I get solution by this code this.props.history.push("/");

My working code:

    .then(response => response.json())
        .then(data => {
            if(data.status == 200){
                this.props.history.push("/");
                console.log('Successfully Login');
          }
        })

I was following this document redirect-on-login-and-logout

I was also try by return But unlucky, this not working for me.

1
katma

Reaktif Yönlendiricisi v3

İç bileşenlerde gezinme

Bir bileşenin içinde yeniden yönlendirilmesi gerektiğinde withRouter dekoratörünü kullanmalısınız. Dekoratör sizin yerine içerik kullanır.

import {withRouter} from 'react-router'

fucntion Foo(props) {
    props.router.push('/users/16');
}

export default withRouter(Foo);

withRouter (Bileşen, [seçenekler])

     

Geliştirmek için başka bir bileşeni saran bir HoC (daha yüksek sipariş bileşeni)   yönlendirici aksesuarı ile sahne.

     

withRouterProps = {      ... componentProps,      yönlendirici,      , parametreler      yer,      rotalar   }

     

Bileşeninizi geçirin ve   sarılmış bileşen.

     

Yönlendiriciyi, sarmalayıcı bileşenine bir yayıncı olarak açık olarak belirtebilirsiniz.   yönlendirici nesneyi bağlamdan geçersiz kıl.

0
katma