reactjs - বিক্রিয়া রাউটার ভি 4 ব্যবহার করে প্রোগ্রামগতভাবে নেভিগেট করুন




ecmascript-6 react-router-v4 (10)

আমি সবেমাত্র v3 থেকে v4 তে react-router প্রতিস্থাপন করেছি।
তবে আমি নিশ্চিত নই কীভাবে কোনও Component সদস্য ফাংশনে প্রোগ্রামিয়ালি নেভিগেট করব। অর্থাত্ handleClick() ফাংশনে আমি /path/some/where ডেটা /path/some/where কিছু ডেটা প্রক্রিয়া করার পরে নেভিগেট করতে চাই। আমি এটি দ্বারা ব্যবহৃত:

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

তবে আমি v4 তে এই জাতীয় ইন্টারফেস খুঁজে পাই না।
আমি কীভাবে ভি 4 ব্যবহার করে নেভিগেট করতে পারি?


আপনারা যাদের React Router বা React Router Dom ব্যবহার করে কোনও রাউটারকে পুরোপুরি সূচনা করার আগে আপনাকে পুনঃনির্দেশের প্রয়োজন হয় আপনি কেবল app.js এর app.js মধ্যে ইতিহাসের অবজেক্টটি অ্যাক্সেস করে এবং এটিতে একটি নতুন রাষ্ট্রকে চাপ দিয়ে পুনর্নির্দেশ সরবরাহ করতে পারেন। নিম্নোক্ত বিবেচনা কর:

function getSubdomain(hostname) {
    let regexParse = new RegExp('[a-z\-0-9]{2,63}\.[a-z\.]{2,5}$');
    let urlParts = regexParse.exec(hostname);
    return hostname.replace(urlParts[0], '').slice(0, -1);
}

class App extends Component {

    constructor(props) {
        super(props);


        this.state = {
            hostState: true
        };

        if (getSubdomain(window.location.hostname).length > 0) {
            this.state.hostState = false;
            window.history.pushState('', '', './login');
        } else {
            console.log(getSubdomain(window.location.hostname));
        }

    }


    render() {
        return (

            <BrowserRouter>
                {this.state.hostState ? (
                    <div>
                        <Route path="/login" component={LoginContainer}/>
                        <Route path="/" component={PublicContainer}/>
                    </div>
                ) : (
                    <div>
                        <Route path="/login" component={LoginContainer}/>
                    </div>
                )

                }
            </BrowserRouter>)
    }


}

এখানে আমরা সাবডোমেনের উপর নির্ভরশীল আউটপুট রুটগুলি পরিবর্তন করতে চাই, যখন উপাদানটি রেন্ডার করার আগে আমরা কার্যকরভাবে পুনর্নির্দেশ করতে পারি তার আগে ইতিহাসের বিষয়টির সাথে আলাপচারিতা করে আমাদের রুটগুলি কৌশলে ছেড়ে যেতে চাই।

window.history.pushState('', '', './login');

আপনি যদি ব্রাউজারের পরিবেশগুলিকে টার্গেট করে থাকেন তবে আপনাকে react-router-dom পরিবর্তে react-router-dom প্যাকেজটি ব্যবহার করতে হবে। কোরকে আলাদা করার জন্য, ( react ) এবং প্ল্যাটফর্মের নির্দিষ্ট কোড, ( react-dom , react-native ) আলাদা করার জন্য তারা আপনাকে দুটি পৃথক প্যাকেজ ইনস্টল করার দরকার নেই এমন একই পদ্ধতির অনুসরণ করছে react-dom , তাই পরিবেশ প্যাকেজগুলিতে আপনার প্রয়োজনীয় সমস্ত কিছু থাকে। আপনি আপনার প্রকল্পে এটি যুক্ত করতে পারেন:

yarn add react-router-dom

অথবা

npm i react-router-dom

আপনাকে প্রথমে যা করতে হবে তা <BrowserRouter> আপনার অ্যাপ্লিকেশনের শীর্ষ পিতামাতার উপাদান হিসাবে parent <BrowserRouter> এইচটিএমএল 5 history এপিআই ব্যবহার করে এবং এটি আপনার জন্য পরিচালনা করে, সুতরাং আপনাকে এটিকে নিজেই ইনস্ট্যান্ট করার এবং <BrowserRouter> হিসাবে <BrowserRouter> উপাদানটিতে <BrowserRouter> বিষয়ে চিন্তা করার দরকার নেই (আগের সংস্করণগুলিতে আপনাকে যেমন করার দরকার ছিল)।

ভি 4-তে, প্রোগ্র্যাম্যাটিকভাবে নেভিগেশনের জন্য আপনাকে history অবজেক্টটি অ্যাক্সেস করতে হবে যা প্রতিক্রিয়া context পাওয়া যায়, যতক্ষণ না আপনার অ্যাপ্লিকেশনের শীর্ষ পিতামাতার হিসাবে আপনার কাছে <BrowserRouter> সরবরাহকারী উপাদান রয়েছে। গ্রন্থাগারটি router অবজেক্টের প্রসঙ্গে প্রকাশ করে, এতে নিজেই একটি সম্পত্তি হিসাবে history থাকে। history ইন্টারফেসটি অন্যদের মধ্যে push , replace এবং goBack মতো কয়েকটি নেভিগেশন পদ্ধতি সরবরাহ করে। আপনি here সম্পত্তি এবং পদ্ধতিগুলির পুরো তালিকাটি পরীক্ষা করতে পারেন।

Redux / Mobx ব্যবহারকারীদের জন্য গুরুত্বপূর্ণ নোট

আপনি যদি আপনার অ্যাপ্লিকেশনটিতে রিডেক্স বা মুবক্সকে আপনার রাজ্য পরিচালনার লাইব্রেরি হিসাবে ব্যবহার করছেন তবে আপনি এমন উপাদানগুলি নিয়ে আসতে পারেন যা অবস্থান-সচেতন হওয়া উচিত তবে ইউআরএল আপডেট ট্রিগার করার পরে পুনরায় রেন্ডার করা হয়নি are

এটি ঘটছে কারণ react-router প্রসঙ্গের মডেলটি ব্যবহার করে উপাদানগুলিতে স্থান দেয়।

সংযুক্ত এবং পর্যবেক্ষক উভয়ই উপাদান তৈরি করেন যার উচিতসামগ্রী আপডেটের পদ্ধতিগুলি তাদের বর্তমান প্রপস এবং তাদের পরবর্তী প্রপসের একটি অগভীর তুলনা করে। কমপক্ষে একটি প্রপ পরিবর্তিত হলে সেই উপাদানগুলি কেবল পুনরায় রেন্ডার করবে। এর অর্থ হ'ল লোকেশন পরিবর্তন হওয়ার সাথে সাথে তারা আপডেট হয় তা নিশ্চিত করার জন্য, লোকেশন পরিবর্তনের সাথে সাথে তাদের এমন একটি প্রপ দেওয়া হবে যা স্থান পরিবর্তন করে।

এটি সমাধানের জন্য দুটি পন্থা হ'ল:

  • আপনার সংযুক্ত উপাদানটিকে একটি পথহীন <Route /> এ মোড়ানো। বর্তমান location অবজেক্টটি এমন একটি প্রস্তাব যা একটি <Route> যে উপাদানটিকে রেন্ডার করে তা পাস করে
  • আপনার সংযুক্ত উপাদানটি withRouter উচ্চতর-অর্ডার উপাদানটির সাথে withRouter , বাস্তবে একই প্রভাব রয়েছে এবং একটি location হিসাবে location ইনজেক্ট করে withRouter

এটিকে নির্ধারণ করে, প্রস্তাবক্রমে আদেশক্রমে অগ্রগতিযুক্ত নেভিগেটের চারটি উপায় রয়েছে:

1.- একটি <Route> উপাদান ব্যবহার

এটি একটি ঘোষণামূলক শৈলীর প্রচার করে। ভি 4 এর আগে, <Route /> উপাদানগুলি আপনার উপাদানগুলির স্তরক্রমের শীর্ষে স্থাপন করা হয়েছিল, আপনার রুটগুলির কাঠামোর আগেই ভাবতে হবে। তবে, এখন আপনার গাছের যে কোনও জায়গায় <Route> উপাদান থাকতে পারে, আপনাকে ইউআরএলের উপর নির্ভর করে শর্তাধীন রেন্ডারিংয়ের জন্য আরও সূক্ষ্ম নিয়ন্ত্রণ রাখতে দেয়। Route আপনার উপাদানগুলির মধ্যে প্রপস হিসাবে match , location এবং history ইনজেকশন দেয়। নেভিগেশন পদ্ধতিগুলি (যেমন push , replace , goBack ...) history অবজেক্টের বৈশিষ্ট্য হিসাবে উপলভ্য।

কোনও Route দিয়ে কিছু রেন্ডার করার জন্য 3 টি উপায় রয়েছে যেকোন component ব্যবহার করে, render বা children প্রপস ব্যবহার করে, তবে একই Route একের বেশি ব্যবহার করবেন না। পছন্দটি ব্যবহারের ক্ষেত্রে নির্ভর করে, তবে মূলত দুটি দুটি বিকল্প কেবল তখনই আপনার উপাদানটিকে রেন্ডার করবে যখন path url অবস্থানের সাথে মেলে, তবে children সাথে অংশটি রেন্ডার করা হবে যে পথটি লোকেশনটির সাথে মেলে কিনা বা না (ইউআই ভিত্তিক ইউজ সামঞ্জস্য করার জন্য দরকারী) ইউআরএল ম্যাচিংয়ে)।

আপনি যদি নিজের উপাদান রেন্ডারিং আউটপুট কাস্টমাইজ করতে চান তবে আপনাকে match , location এবং history ব্যতীত অন্য কোনও প্রপোসগুলি চান যা আপনার উপাদানগুলিতে প্রেরণ করার জন্য আপনাকে কোনও ফাংশনে নিজের উপাদানটি মোড়ানো এবং render বিকল্পটি ব্যবহার করতে হবে। উদাহরণস্বরূপ উদাহরণ:

import { BrowserRouter as Router } from 'react-router-dom'

const ButtonToNavigate = ({ title, history }) => (
  <button
    type="button"
    onClick={() => history.push('/my-new-location')}
  >
    {title}
  </button>
);

const SomeComponent = () => (
  <Route path="/" render={(props) => <ButtonToNavigate {...props} title="Navigate elsewhere" />} />
)    

const App = () => (
  <Router>
    <SomeComponent /> // Notice how in v4 we can have any other component interleaved
    <AnotherComponent />
  </Router>
);

withRouter ব্যবহার করে

এই উচ্চতর অর্ডার উপাদানটি Route মতো একই প্রপসগুলিকে ইনজেক্ট করবে। যাইহোক, এটি সীমাবদ্ধতার সাথে বহন করে যে আপনার প্রতি ফাইল প্রতি 1 জন হউক থাকতে পারে।

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

const ButtonToNavigate = ({ history }) => (
  <button
    type="button"
    onClick={() => history.push('/my-new-location')}
  >
    Navigate
  </button>
);


ButtonToNavigate.propTypes = {
  history: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired,
  }),
};

export default withRouter(ButtonToNavigate);

3.- একটি Redirect উপাদান ব্যবহার

একটি <Redirect> রেন্ডারিং একটি নতুন স্থানে নেভিগেট করবে। তবে মনে রাখবেন যে, ডিফল্টরূপে , বর্তমান স্থানটি সার্ভার-সাইড রিডাইরেক্টস (HTTP 3xx) এর মতো নতুন দ্বারা প্রতিস্থাপিত হয়। নতুন অবস্থানটি প্রোপ দ্বারা সরবরাহ করা to , এটি স্ট্রিং (পুনঃনির্দেশ করার URL) বা কোনও location বস্তু হতে পারে। পরিবর্তে আপনি যদি ইতিহাসের উপরে একটি নতুন এন্ট্রি চাপতে চান তবে একটি push প্রপও পাস করুন এবং এটিকে true হিসাবে সেট করুন

<Redirect to="/your-new-location" push />

৪.- প্রসঙ্গে ম্যানুয়ালি router ব্যবহার করা

কিছুটা নিরুৎসাহিত করা হয়েছে কারণ context এখনও একটি পরীক্ষামূলক এপিআই এবং এটি ভবিষ্যতে প্রতিক্রিয়া প্রকাশের ক্ষেত্রে বিরতি / পরিবর্তন হতে পারে

const ButtonToNavigate = (props, context) => (
  <button
    type="button"
    onClick={() => context.router.history.push('/my-new-location')}
  >
    Navigate to a new location
  </button>
);

ButtonToNavigate.contextTypes = {
  router: React.PropTypes.shape({
    history: React.PropTypes.object.isRequired,
  }),
};

এটি বলার অপেক্ষা রাখে না যে অন্যান্য রাউটার উপাদানগুলি ব্রাউজার নন ব্রাউজার ইকোসিস্টেমগুলির জন্য বোঝানো হয়েছে, যেমন <NativeRouter> যা মেমরিতে একটি নেভিগেশন স্ট্যাকটিকে প্রতিলিপি করে এবং রিএ্যাক্ট নেটিভ প্ল্যাটফর্মকে লক্ষ্য করে, react-router-native প্যাকেজের মাধ্যমে উপলব্ধ।

পরবর্তী কোনও রেফারেন্সের জন্য, সরকারী দস্তাবেজগুলি একবার দেখে নিতে দ্বিধা করবেন না। লাইব্রেরির অন্যতম সহ-লেখক দ্বারা তৈরি করা একটি video যা কিছু বড় বড় পরিবর্তনগুলি হাইলাইট করে রিঅ্যাক্ট-রাউটার ভি 4 এর জন্য দুর্দান্ত শীতল ভূমিকা সরবরাহ করে।


আমার মনে হয় @ggmemezz বেশিরভাগ ক্ষেত্রে বিয়োগ বিয়োগ করে যা আমি মনে করি এটি বেশ গুরুত্বপূর্ণ।

// history is already a dependency or React Router, but if don't have it then try npm install save-dev history

import createHistory from "history/createBrowserHistory"

// in your function then call add the below 
const history = createHistory();
// Use push, replace, and go to navigate around.
history.push("/home");

এটি আমাকে ক্রিয়াকলাপ / কল সহ একটি সাধারণ পরিষেবা লেখার অনুমতি দেয় যা আমি আমার উপাদানগুলিতে খুব বেশি হুক না করেই চাই যে কোনও উপাদান থেকে নেভিগেশন করতে কল করতে পারি ...

কেন আগে কেউ এই সমাধান সরবরাহ করেনি তা পরিষ্কার নয়। আমি আশা করি এটি সাহায্য করে এবং আপনি যদি এটির সাথে কোনও সমস্যা দেখতে পান তবে আমাকে জানান let


আমি এখন কয়েক দিন ধরে v4 পরীক্ষা করছি এবং .. আমি এটিকে এখনও ভালবাসি! এটি কিছুক্ষণ পরে বোঝা যায়।

আমারও একই প্রশ্ন ছিল এবং আমি নিম্নলিখিতটি সর্বাধিক কাজ করা (এবং এমনকি এটি কীভাবে উদ্দেশ্যযুক্ত তাও হতে পারে) এর মত হ্যান্ডেল করতে পেলাম। এটি স্টেট, একটি টেনারি অপারেটর এবং <Redirect>

কনস্ট্রাক্টরে ()

this.state = {
    redirectTo: null
} 
this.clickhandler = this.clickhandler.bind(this);

রেন্ডারে ()

render(){
    return (
        <div>
        { this.state.redirectTo ?
            <Redirect to={{ pathname: this.state.redirectTo }} /> : 
            (
             <div>
               ..
             <button onClick={ this.clickhandler } />
              ..
             </div>
             )
         }

ক্লিকহ্যান্ডলারে ()

 this.setState({ redirectTo: '/path/some/where' });

আশা করি এটা সাহায্য করবে. আমাকে জানতে দাও.


এইটা কাজ করে:

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

const SomeComponent = withRouter(({ history }) => (
    <div onClick={() => history.push('/path/some/where')}>
        some clickable element
    </div>); 
);

export default SomeComponent;

এটি সম্পন্ন করার সবচেয়ে সহজ উপায়:

this.props.history.push("/new/url")

বিঃদ্রঃ:

  • আপনি prop উপাদান থেকে history উপাদানটি সেই উপাদানটির কাছে দিতে পারেন যা আপনি যদি ক্রিয়াকলাপটি উপলভ্য না হন তবে তা করতে চান want

টি এল; ডিআর:

if (navigate) {
  return <Redirect to="/" push={true} />
}

সহজ এবং ঘোষিত উত্তরটি হ'ল setState() সংমিশ্রণে <Redirect to={URL} push={boolean} /> ব্যবহার করতে হবে

পুশ: বুলিয়ান - সত্য হয়ে গেলে, পুনর্নির্দেশ বর্তমানের পরিবর্তে ইতিহাসে নতুন এন্ট্রি ঠেলে দেবে।

import { Redirect } from 'react-router'

class FooBar extends React.Component {
  state = {
    navigate: false
  }

  render() {
    const { navigate } = this.state

    // here is the important part
    if (navigate) {
      return <Redirect to="/" push={true} />
    }
   // ^^^^^^^^^^^^^^^^^^^^^^^

    return (
      <div>
        <button onClick={() => this.setState({ navigate: true })}>
          Home
        </button>
      </div>
    )
  }
}

here সম্পূর্ণ উদাহরণ। here আরও পড়ুন।

গীত। উদাহরণটি রাষ্ট্রের সূচনা করার জন্য ES7 + সম্পত্তি প্রারম্ভিক ব্যবহার করে। আগ্রহী হলে here দেখুন।


পদক্ষেপ 1: উপরে আমদানি করার জন্য কেবল একটি জিনিস রয়েছে:

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

পদক্ষেপ 2: আপনার রুটে, ইতিহাসটি পাস করুন:

    <Route exact path='/posts/add' render={({history})  => (
      <PostAdd
        history={history}
      />
    .)}/>

পদক্ষেপ 3: ইতিহাস পরবর্তী অংশগুলিতে প্রপসের অংশ হিসাবে স্বীকৃত হয়, তাই আপনি কেবল:

    this.props.history.push('/');

এটি ছিল সহজ এবং সত্যই শক্তিশালী।


যেহেতু এই ভয়াবহ নকশাটি মোকাবেলা করার জন্য অন্য কোনও উপায় নেই, তাই আমি একটি জেনেরিক উপাদান লিখেছি যা withRouter HOC পদ্ধতির ব্যবহার করে। নীচের উদাহরণটি একটি button উপাদান মোড়ানো হয়, তবে আপনি যে কোনও ক্লিকযোগ্য উপাদানগুলিতে প্রয়োজন তা পরিবর্তন করতে পারেন:

import React from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';

const NavButton = (props) => (
  <Button onClick={() => props.history.push(props.to)}>
    {props.children}
  </Button>
);

NavButton.propTypes = {
  history: PropTypes.shape({
    push: PropTypes.func.isRequired
  }),
  to: PropTypes.string.isRequired
};

export default withRouter(NavButton);

ব্যবহার:

<NavButton to="/somewhere">Click me</NavButton>

this.props.history.push('new_url') সহজেই ব্যবহার করতে পারে: this.props.history.push('new_url')





react-router-v4