React Router kullanarak bir sayfayı yeniden yönlendirmenin en iyi yolu nedir?

React Router'da yeniyim ve bir sayfayı yeniden yönlendirmenin pek çok yolu olduğunu öğrendim:

1. Kullanma browserHistory.push("/path")

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

2. Kullanma this.context.router.push("/path")

   class Foo extends React.Component {
       constructor(props, context) {
           super(props, context);
           //do something...
       }
       redirect() {
           this.context.router.push("/path")
       }
   }
   
   Foo.contextTypes = {
       router: React.PropTypes.object
   }
   

3. React Router v4'te this.context.history.push("/path")ve var this.props.history.push("/path"). Ayrıntılar: React Router v4'te Geçmiş'e nasıl aktarılır?

Tüm bu seçenekler beni çok karıştırdı, bir sayfayı yeniden yönlendirmenin en iyi yolu var mı?

Aslında kullanım durumunuza bağlıdır.

1) Rotanızı yetkisiz kullanıcılardan korumak istiyorsunuz

Bu durumda, çağrılan bileşeni kullanabilir <Redirect />ve aşağıdaki mantığı uygulayabilirsiniz:

import React from 'react'
import  { Redirect } from 'react-router-dom'

const ProtectedComponent = () => {
  if (authFails)
    return <Redirect to='/login'  />
  }
  return <div> My Protected Component </div>
}

İstersen unutmayın <Redirect />, beklediğiniz gibi çalışmaya, içinde senin bileşen yılların yerleştirin gerektiğini sonunda DOM öğesi olarak kabul edilmelidir, böylece yöntemi hale aksi takdirde iş olmaz.

2) Belirli bir işlemden sonra yönlendirmek istiyorsunuz (diyelim ki bir öğe oluşturduktan sonra)

Bu durumda geçmişi kullanabilirsiniz:

myFunction() {
  addSomeStuff(data).then(() => {
      this.props.history.push('/path')
    }).catch((error) => {
      console.log(error)
    })

veya

myFunction() {
  addSomeStuff()
  this.props.history.push('/path')
}

Geçmişe erişim sağlamak için, bileşeninizi adlı bir HOC ile sarmalayabilirsiniz withRouter. Bileşeninizi onunla sardığınızda geçer match locationve historydesteklenir. Daha fazla ayrıntı için lütfen withRouter'ın resmi belgelerine bakın .

Senin bileşeni çocuğu ise <Route />o gibi bir şey ise, yani bileşen, <Route path='/path' component={myComponent} />, sizinle bileşeni sarmak gerekmez withRouter, çünkü <Route />paso match, locationve historyonun çocuğa.

3) Bir öğeyi tıkladıktan sonra yeniden yönlendirin

Burada iki seçenek var. Bunu history.push()bir onClicketkinliğe ileterek kullanabilirsiniz :

<div onClick={this.props.history.push('/path')}> some stuff </div>

veya bir <Link />bileşen kullanabilirsiniz :

 <Link to='/path' > some stuff </Link>

Sanırım bu vakada temel kural, öncelikle kullanmaya çalışmaktır <Link />, sanırım özellikle performans nedeniyle.

Şimdi react-router v15.1ve ilerisi ile bağlayabiliriz useHistory, Bu süper basit ve net bir yol. İşte kaynak blogdan basit bir örnek.

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

function BackButton({ children }) {
  let history = useHistory()
  return (
    <button type="button" onClick={() => history.goBack()}>
      {children}
    </button>
  )
}

Bunu herhangi bir işlevsel bileşen ve özel kancalarda kullanabilirsiniz. Ve evet bu, diğer kancalarla aynı sınıf bileşenlerinde çalışmayacaktır.

Bununla ilgili daha fazla bilgiyi burada https://reacttraining.com/blog/react-router-v5-1/#usehistory

Ayrıca react yönlendirici dom kitaplığı useHistory'yi de 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>
  );
}
`

https://reactrouter.com/web/api/Hooks/usehistory

En basit yollardan biri: Bağlantıyı aşağıdaki gibi kullanın:

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

<Link to={`your-path`} activeClassName="current">{your-link-name}</Link>

Tüm div bölümünü bağlantı olarak ele almak istiyorsak:

 <div>
     <Card as={Link} to={'path-name'}>
         .... 
           card content here
         ....
     </Card>
 </div>

Ayrıca şunları da yapabilirsiniz Redirectdahilinde Routeolarak izler. Bu geçersiz yolları işlemek içindir.

<Route path='*' render={() => 
     (
       <Redirect to="/error"/>
     )
}/>