React Router का उपयोग करके किसी पृष्ठ को पुनर्निर्देशित करने का सबसे अच्छा तरीका क्या है?

Question 1

मैं राउटर को नया करने के लिए नया हूं और सीखता हूं कि किसी पृष्ठ को पुनर्निर्देशित करने के कई तरीके हैं:

का उपयोग करते हुए browserHistory.push("/path")

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

का उपयोग करते हुए 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
}

React Router v4 में, वहाँ this.context.history.push("/path")और है this.props.history.push("/path")। विवरण: कैसे प्रतिक्रिया रूटर v4 में इतिहास के लिए धक्का?

मैं इन सभी विकल्पों से बहुत भ्रमित हूं, क्या किसी पृष्ठ को पुनर्निर्देशित करने का एक सबसे अच्छा तरीका है?

Question 2

दरअसल यह आपके उपयोग के मामले पर निर्भर करता है।

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 />पहले उपयोग करने की कोशिश करना है , मुझे लगता है कि प्रदर्शन के कारण विशेष रूप से।

Question 3

अब प्रतिक्रिया-राउटर के साथ 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

Question 4

आप राउटर रॉम लाइब्रेरी का उपयोग भी कर सकते हैं।

`
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

Question 5

सबसे सरल तरीके में से एक: लिंक का उपयोग इस प्रकार है:

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>

Question 6

आप भी कर सकते हैं Redirectके भीतर Routeके रूप में इस प्रकार है। यह अमान्य मार्गों को संभालने के लिए है।

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