কীভাবে প্রতিক্রিয়া-রাউটার ভি 4 এ ইতিহাস পাবেন?

Question 1

আমার প্রতিক্রিয়া-রাউটার v3 থেকে v4 এ স্থানান্তরিত করতে কিছুটা সমস্যা হয়েছে। v3 এ আমি যে কোনও জায়গায় এটি করতে সক্ষম হয়েছিল:

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

আমি কীভাবে এটি ভি 4 এ অর্জন করব।

আমি জানি যে আমি এই ব্যবহার করতে পারি withRouter আপনি যখন কোনও কম্পোনেন্টে থাকবেন তখন , প্রতিক্রিয়া প্রসঙ্গে বা ইভেন্ট রাউটার প্রপস। তবে আমার ক্ষেত্রে তা হয় না।

আমি সমানতা খোঁজ করছি NavigatingOutsideOfComponents V4 মধ্যে

Question 2

আপনার কেবল এমন একটি মডিউল থাকা দরকার যা কোনও historyবস্তু রফতানি করে । তারপরে আপনি এই প্রকল্পটি আপনার প্রকল্প জুড়ে আমদানি করবেন।

// history.js
import { createBrowserHistory } from 'history'

export default createBrowserHistory({
  /* pass a configuration object here if needed */
})

তারপরে, বিল্ট-ইন রাউটারগুলির মধ্যে একটি ব্যবহার করার পরিবর্তে আপনি <Router>উপাদানটি ব্যবহার করবেন ।

// index.js
import { Router } from 'react-router-dom'
import history from './history'
import App from './App'

ReactDOM.render((
  <Router history={history}>
    <App />
  </Router>
), holder)

// some-other-file.js
import history from './history'
history.push('/go-here')

Question 3

এইটা কাজ করে! https://reacttraining.com/react-router/web/api/withRouter

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

class MyComponent extends React.Component {
  render () {
    this.props.history;
  }
}

withRouter(MyComponent);

Question 4

আপনি যা করতে পারতেন তা গ্রহণযোগ্য উত্তরের সিমিলিরি ব্যবহার is react এবং react-routerনিজেই আপনি প্রদান করতেhistory আপত্তি, যেগুলো তোমরা ও একটি ফাইলে সুযোগ তারপর রপ্তানি করতে পারেন।

ইতিহাস.js

import React from 'react';
import { withRouter } from 'react-router';

// variable which will point to react-router history
let globalHistory = null;

// component which we will mount on top of the app
class Spy extends React.Component {
  constructor(props) {
    super(props)
    globalHistory = props.history; 
  }

  componentDidUpdate() {
    globalHistory = this.props.history;
  }

  render(){
    return null;
  }
}

export const GlobalHistory = withRouter(Spy);

// export react-router history
export default function getHistory() {    
  return globalHistory;
}

এরপরে আপনি ইতিহাসের পরিবর্তনশীল আরম্ভ করতে কম্পোনেন্টটি আমদানি করুন এবং মাউন্ট করুন:

import { BrowserRouter } from 'react-router-dom';
import { GlobalHistory } from './history';

function render() {
  ReactDOM.render(
    <BrowserRouter>
        <div>
            <GlobalHistory />
            //.....
        </div>
    </BrowserRouter>
    document.getElementById('app'),
  );
}

এবং তারপরে আপনি যখন আপনার অ্যাপ্লিকেশনটি মাউন্ট হয়ে গেছেন তখন তা কেবল আমদানি করতে পারেন:

import getHistory from './history'; 

export const goToPage = () => (dispatch) => {
  dispatch({ type: GO_TO_SUCCESS_PAGE });
  getHistory().push('/success'); // at this point component probably has been mounted and we can safely get `history`
};

আমি এমনকি এনএমপি প্যাকেজ তৈরি করেছিলাম যা কেবল এটি করে।

Question 5

আপনি যদি রিডেক্স এবং রিডেক্স-থাঙ্ক ব্যবহার করছেন তবে সলিউশন সলিউশনটি রিঅ্যাক্ট -রাউটার-রিডেক্স ব্যবহার করবে

// then, in redux actions for example
import { push } from 'react-router-redux'

dispatch(push('/some/path'))

কিছু কনফিগারেশন করার জন্য ডক্সটি দেখা গুরুত্বপূর্ণ।

Question 6

এই উত্তরটির উপর ঝাঁকুনি যদি আপনার কেবল অন্য উপাদানটিতে নেভিগেট করার জন্য ইতিহাসের অবজেক্টের প্রয়োজন হয়:

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

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

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

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

Question 7

App.js এ

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

 const TheContext = React.createContext(null);

 const App = () => {
   const history = useHistory();

   <TheContext.Provider value={{ history, user }}>

    <Switch>
        <Route exact path="/" render={(props) => <Home {...props} />} />
        <Route
          exact
          path="/sign-up"
          render={(props) => <SignUp {...props} setUser={setUser} />}
        /> ...

তারপরে একটি শিশু উপাদান:

const Welcome = () => {
    
    const {user, history} = React.useContext(TheContext); 
    ....

Question 8

সুনির্দিষ্ট ক্ষেত্রে react-routerব্যবহার contextকরা একটি বৈধ কেস দৃশ্যের উদাহরণস্বরূপ

class MyComponent extends React.Component {
  props: PropsType;

  static contextTypes = {
    router: PropTypes.object
  };

  render () {
    this.context.router;
  }
}

আপনি রাউটার প্রসঙ্গে যেমন ইতিহাসের কোনও উদাহরণ অ্যাক্সেস করতে পারেন, যেমন this.context.router.history।