Який найкращий спосіб перенаправити сторінку за допомогою React Router?

Я новачок у React Router і дізнався, що існує так багато способів перенаправити сторінку:

1. Використовуючи browserHistory.push("/path")

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

2. Використовуючи 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 є this.context.history.push("/path")і this.props.history.push("/path"). Подробиці: Як перейти до історії в React Router v4?

Мене так бентежать усі ці варіанти, чи є найкращий спосіб перенаправити сторінку?

Насправді це залежить від вашого випадку використання.

1) Ви хочете захистити свій маршрут від несанкціонованих користувачів

У цьому випадку ви можете використовувати викликаний компонент <Redirect />і реалізувати таку логіку:

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

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

Майте на увазі, що якщо ви хочете <Redirect />працювати так, як ви очікуєте, вам слід помістити його всередину методу візуалізації вашого компонента, щоб з часом його можна було розглядати як елемент DOM, інакше він не буде працювати.

2) Ви хочете перенаправити після певної дії (припустимо, після створення елемента)

У цьому випадку ви можете використовувати історію:

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

або

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

Для того, щоб мати доступ до історії, ви можете обернути ваш компонент HOC під назвою withRouter. Коли ви обгортаєте компонент ним, він проходить match locationі historyпідтримується. Щоб отримати докладнішу інформацію, ознайомтесь з офіційною документацією для withRouter .

Якщо компонент є дочірнім по відношенню до <Route />компоненту, тобто , якщо це що - щось на зразок <Route path='/path' component={myComponent} />, ви не повинні обернути компонент з withRouter, тому що <Route />перевали match, locationі historyдо своєї дитини.

3) Переспрямування після натискання на якийсь елемент

Тут є два варіанти. Ви можете використовувати history.push(), передавши його onClickподії:

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

або ви можете використовувати <Link />компонент:

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

Я думаю, що основне правило в цьому випадку полягає в тому, щоб спробувати використовувати <Link />спочатку, я думаю, особливо через продуктивність.

Тепер, реагуючи на маршрутизатор v15.1і далі, ми можемо useHistoryпідключити це, це надзвичайно простий і зрозумілий спосіб. Ось простий приклад із вихідного блогу.

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

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

Ви можете використовувати це в будь-якому функціональному компоненті та на замовлення. Так, це не буде працювати з компонентами класу так само, як будь-який інший хук.

Дізнайтеся більше про це тут https://reacttraining.com/blog/react-router-v5-1/#usehistory

Ви також можете використовувати реакційний маршрутизатор dom бібліотеку useHistory;

`
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

Один з найпростіших способів: використовуйте посилання наступним чином:

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

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

Якщо ми хочемо охопити весь розділ div як посилання:

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

Ви також можете Redirectв рамках Routeнаступного. Це стосується недійсних маршрутів.

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