রিঅ্যাক্টজগুলির নতুন প্রতিক্রিয়া-রাউটার-ডোমে পুনঃনির্দেশটি কীভাবে ব্যবহার করবেন

Question

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

কোড:

import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Redirect } from 'react-router'

import SignUpForm from '../../register/components/SignUpForm';
import styles from './PagesStyles.css';
import axios from 'axios';
import Footer from '../../shared/components/Footer';

class SignUpPage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      errors: {},
      client: {
        userclient: '',
        clientname: '',
        clientbusinessname: '',
        password: '',
        confirmPassword: ''
      }
    };

    this.processForm = this.processForm.bind(this);
    this.changeClient = this.changeClient.bind(this);
  }

  changeClient(event) {
    const field = event.target.name;
    const client = this.state.client;
    client[field] = event.target.value;

    this.setState({
      client
    });
  }

  async processForm(event) {
    event.preventDefault();

    const userclient = this.state.client.userclient;
    const clientname = this.state.client.clientname;
    const clientbusinessname = this.state.client.clientbusinessname;
    const password = this.state.client.password;
    const confirmPassword = this.state.client.confirmPassword;
    const formData = { userclient, clientname, clientbusinessname, password, confirmPassword };

    axios.post('/signup', formData, { headers: {'Accept': 'application/json'} })
      .then((response) => {
        this.setState({
          errors: {}
        });

        <Redirect to="/"/> // Here, nothings happens
      }).catch((error) => {
        const errors = error.response.data.errors ? error.response.data.errors : {};
        errors.summary = error.response.data.message;

        this.setState({
          errors
        });
      });
  }

  render() {
    return (
      <div className={styles.section}>
        <div className={styles.container}>
          <img src={require('./images/lisa_principal_bg.png')} className={styles.fullImageBackground} />
          <SignUpForm 
            onSubmit={this.processForm}
            onChange={this.changeClient}
            errors={this.state.errors}
            client={this.state.client}
          />
          <Footer />
        </div>
      </div>
    );
  }
}

export default SignUpPage;

Comments

আপনার Redirectচেহারাটি জেএসএক্সের মতো, জেএসের মতো নয়।

— এলেমিস্টার

আপনি কি পুরো উপাদান কোড সরবরাহ করতে পারবেন

— কর্নহোলিওবিভিস

হ্যাঁ, আমি জেএসএক্স ব্যবহার করছি। ভাল, সম্ভবত আমার স্পষ্ট করা প্রয়োজন। পোষ্ট অনুরোধটি একটি REACT উপাদানটির ভিতরে থাকে যা অনুরোধ করে।

— মাওরিসিও

@ কর্নহোলিওবিভিস, নিশ্চিত, এখন আপনি সম্পূর্ণ দেখতে পাবেন। আমি এক্সপ্রেসগুলি দিয়ে সার্ভারটি তৈরি করি, আপনার এই ডেটার দরকার আছে কিনা তা আমি জানি না

— maoooricio

আপনি অক্ষর.পস্ট থেকে কলব্যাক প্রতিক্রিয়া পাচ্ছেন তা যাচাই করতে পারবেন? এছাড়াও কেন আপনি কোথাও অপেক্ষা না করে অ্যাসিঙ্ক ফাংশনটি ব্যবহার করছেন?

— কর্নহোলিওবিভিস

Answer 1

আপনাকে এমন setStateএকটি সম্পত্তি সেট করতে ব্যবহার করতে হবে যা <Redirect>আপনার render()পদ্ধতির অভ্যন্তরে রেন্ডার করবে ।

যেমন

class MyComponent extends React.Component {
  state = {
    redirect: false
  }

  handleSubmit () {
    axios.post(/**/)
      .then(() => this.setState({ redirect: true }));
  }

  render () {
    const { redirect } = this.state;

     if (redirect) {
       return <Redirect to='/somewhere'/>;
     }

     return <RenderYourForm/>;
}

আপনি অফিসিয়াল ডকুমেন্টেশনে একটি উদাহরণও দেখতে পাবেন: https://reacttraining.com/react-router/web/example/auth-work ফ্লো

---

এটি বলেছিল, আমি আপনাকে একটি পরিষেবা বা কোনও কিছুর ভিতরে API কল স্থাপন করার পরামর্শ দেব। তারপরে আপনি কেবলমাত্র historyউদ্দেশ্যটিকে অগ্রগতিমূলকভাবে রুটে ব্যবহার করতে পারবেন use রিডেক্সের সাথে একীকরণ এইভাবে কাজ করে।

তবে আমি অনুমান করি যে আপনার এইভাবে এটি করার কারণ রয়েছে।

Comments

@sebastian সেবাল্ড আপনি দ্বারা কি বোঝাতে চেয়েছেন: put the API call inside a service or something?

— andrea-f

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

— সেবাস্তিয়ান সেবল্ড

ফাইলের শুরুতে এটি ব্যবহার করতে আপনাকে পুনঃনির্দেশ অন্তর্ভুক্ত করতে হবে তা মনোযোগ দিন: 'রিঅ্যাক্ট-রাউটার-ডোম' থেকে {পুনর্নির্দেশ} আমদানি করুন

— অ্যালেক্স

হ্যাঁ, ফণা Redirectনীচে কল করা হয় history.replace। আপনি যদি historyপর্যবেক্ষণটিতে অ্যাক্সেস চান তবে withRoutet/ ব্যবহার করুন Route।

— সেবাস্তিয়ান সেবল্ড

react-router> = 5.1 এ এখন const history = useHistory(); history.push("/myRoute")

— হুকস

Answer 2

শিরোনামের প্রতিক্রিয়া হিসাবে এখানে একটি ছোট উদাহরণ যেমন উল্লিখিত সমস্ত উদাহরণ আমার মতের পাশাপাশি অফিসিয়ালটি জটিল।

আপনার কীভাবে es2015 স্থানান্তর করতে হবে সেই সাথে আপনার সার্ভারটিকে পুনর্নির্দেশকে পরিচালনা করতে সক্ষম করে তুলতে হবে। এক্সপ্রেসের জন্য এখানে একটি স্নিপেট। এর সাথে সম্পর্কিত আরও তথ্য এখানে পাওয়া যাবে ।

এটি অন্যান্য সমস্ত রুটের নীচে রাখার বিষয়টি নিশ্চিত করুন।

const app = express();
app.use(express.static('distApp'));

/**
 * Enable routing with React.
 */
app.get('*', (req, res) => {
  res.sendFile(path.resolve('distApp', 'index.html'));
});

এটি .jsx ফাইল। কীভাবে দীর্ঘতম পথটি প্রথমে আসে এবং আরও সাধারণ হয় তা লক্ষ্য করুন। সর্বাধিক সাধারণ রুটের জন্য সঠিক বৈশিষ্ট্যটি ব্যবহার করুন।

// Relative imports
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';

// Absolute imports
import YourReactComp from './YourReactComp.jsx';

const root = document.getElementById('root');

const MainPage= () => (
  <div>Main Page</div>
);

const EditPage= () => (
  <div>Edit Page</div>
);

const NoMatch = () => (
  <p>No Match</p>
);

const RoutedApp = () => (
  <BrowserRouter >
    <Switch>
      <Route path="/items/:id" component={EditPage} />
      <Route exact path="/items" component={MainPage} />          
      <Route path="/yourReactComp" component={YourReactComp} />
      <Route exact path="/" render={() => (<Redirect to="/items" />)} />          
      <Route path="*" component={NoMatch} />          
    </Switch>
  </BrowserRouter>
);

ReactDOM.render(<RoutedApp />, root); 

Comments

এটি সব সময় কাজ করে না। যদি আপনার কাছ থেকে একটি পুনর্নির্দেশ আছে home/hello> home/hello/1কিন্তু তারপর যেতে home/helloএবং হিট এটা অভ্যস্ত প্রথমবার পুনর্নির্দেশ লিখুন। কোন ধারণা কেন ??

— ওয়ালরাস

আমি আপনাকে যদি সম্ভব হয় তবে "ক্রিয়েট-রিএ্যাক্ট-অ্যাপ" ব্যবহার করার এবং রিএ্যাক্ট-রাউটার থেকে ডকুমেন্টেশন অনুসরণ করার পরামর্শ দিচ্ছি। "ক্রিয়েট-রিএ্যাক্ট-অ্যাপ" দিয়ে আমার পক্ষে সবকিছু ঠিকঠাক কাজ করে। আমি নিজের প্রতিক্রিয়া প্রয়োগটি নতুন প্রতিক্রিয়া-রাউটারের সাথে মানিয়ে নিতে সক্ষম হইনি।

— ম্যাথিস কোহলি 20

Answer 3

আপনার পছন্দসই কোনও ফাংশনের ভিতরে কেবল এটি কল করুন।

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

Comments

বাইরের উপাদান সম্পর্কে কি?

— Nux

এই বিষয়গুলি এখানে দেখুন: github.com/ReactTraining/react-router/issues/… @ নাক্স

— মাসুম বিল্লাহ

Answer 4

প্রতিক্রিয়া রাউটার ভি 5 এখন আপনাকে কেবল ইতিহাসের সাহায্যে হিস্টরি () হুক ব্যবহার করে পুনর্নির্দেশের অনুমতি দেয় :

import { useHistory } from "react-router"

function HomeButton() {
  let history = useHistory()

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

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

Answer 5

এরকম কিছু চেষ্টা করুন।

import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Redirect } from 'react-router'

import SignUpForm from '../../register/components/SignUpForm';
import styles from './PagesStyles.css';
import axios from 'axios';
import Footer from '../../shared/components/Footer';

class SignUpPage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      errors: {},
      callbackResponse: null,
      client: {
        userclient: '',
        clientname: '',
        clientbusinessname: '',
        password: '',
        confirmPassword: ''
      }
    };

    this.processForm = this.processForm.bind(this);
    this.changeClient = this.changeClient.bind(this);
  }

  changeClient(event) {
    const field = event.target.name;
    const client = this.state.client;
    client[field] = event.target.value;

    this.setState({
      client
    });
  }

  processForm(event) {
    event.preventDefault();

    const userclient = this.state.client.userclient;
    const clientname = this.state.client.clientname;
    const clientbusinessname = this.state.client.clientbusinessname;
    const password = this.state.client.password;
    const confirmPassword = this.state.client.confirmPassword;
    const formData = { userclient, clientname, clientbusinessname, password, confirmPassword };

    axios.post('/signup', formData, { headers: {'Accept': 'application/json'} })
      .then((response) => {
        this.setState({
          callbackResponse: {response.data},
        });
      }).catch((error) => {
        const errors = error.response.data.errors ? error.response.data.errors : {};
        errors.summary = error.response.data.message;

        this.setState({
          errors
        });
      });
  }

const renderMe = ()=>{
return(
this.state.callbackResponse
?  <SignUpForm 
            onSubmit={this.processForm}
            onChange={this.changeClient}
            errors={this.state.errors}
            client={this.state.client}
          />
: <Redirect to="/"/>
)}

  render() {
    return (
      <div className={styles.section}>
        <div className={styles.container}>
          <img src={require('./images/lisa_principal_bg.png')} className={styles.fullImageBackground} />
         {renderMe()}
          <Footer />
        </div>
      </div>
    );
  }
}

export default SignUpPage;

Comments

এটি কাজ করে !, আপনাকে অনেক ধন্যবাদ। এটি করার অন্য উপায় এটি।

— মাউরিসিওও

আপনার উপাদান উপাদানগুলিতে HTTP অনুরোধ করা উচিত নয়

— Kermit_ice_tea

'../../Register/components/SignUpForm' থেকে আমদানি করা সাইনআপফর্মের ভিতরে থাকা কী ভাগ করে নিতে পারেন? আমি এ থেকে শেখার চেষ্টা করছি। যদিও আমার ক্ষেত্রে, আমি একটি রিডাক্স ফর্মটি ব্যবহার করছি

— টেমি 'টপসি' বেলো

Answer 6

বিকল্পভাবে, আপনি ব্যবহার করতে পারেন withRouter। আপনি অ্যাক্সেস পেতে পারেন historyবস্তুর বৈশিষ্ট্য এবং নিকটস্থ <Route>এর matchমাধ্যমে withRouterউচ্চতর-অর্ডার অংশটি। withRouterআপডেট হওয়া match, locationএবং historyমোড়ানো উপাদানগুলিতে প্রপসগুলি যখনই রেন্ডার করে pass

import React from "react"
import PropTypes from "prop-types"
import { withRouter } from "react-router"

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { match, location, history } = this.props

    return <div>You are now at {location.pathname}</div>
  }
}
// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
const ShowTheLocationWithRouter = withRouter(ShowTheLocation)

বা শুধু:

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

const Button = withRouter(({ history }) => (
  <button
    type='button'
    onClick={() => { history.push('/new-location') }}
  >
    Click Me!
  </button>
))

Answer 7

আপনি এই উদ্দেশ্যে একটি হক লিখতে এবং একটি পদ্ধতি কল পুনর্নির্দেশ লিখতে পারেন, এখানে কোড:

import React, {useState} from 'react';
import {Redirect} from "react-router-dom";

const RedirectHoc = (WrappedComponent) => () => {
    const [routName, setRoutName] = useState("");
    const redirect = (to) => {
        setRoutName(to);
    };


    if (routName) {
        return <Redirect to={"/" + routName}/>
    }
    return (
        <>
            <WrappedComponent redirect={redirect}/>
        </>
    );
};

export default RedirectHoc;

Answer 8

"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-router-dom": "^4.2.2"

অন্য পৃষ্ঠায় নেভিগেটের জন্য (আমার ক্ষেত্রে পৃষ্ঠা সম্পর্কে), আমি ইনস্টল করেছি prop-types। তারপরে আমি এটি সংশ্লিষ্ট উপাদানটিতে আমদানি করি this.context.router.history.push('/about')nd এবং আমি ব্যবহার করি nd এবং এটি নেভিগেট হয়।

আমার কোডটি হ'ল,

import React, { Component } from 'react';
import '../assets/mystyle.css';
import { Redirect } from 'react-router';
import PropTypes from 'prop-types';

export default class Header extends Component {   
    viewAbout() {
       this.context.router.history.push('/about')
    }
    render() {
        return (
            <header className="App-header">
                <div className="myapp_menu">
                    <input type="button" value="Home" />
                    <input type="button" value="Services" />
                    <input type="button" value="Contact" />
                    <input type="button" value="About" onClick={() => { this.viewAbout() }} />
                </div>
            </header>
        )
    }
}
Header.contextTypes = {
    router: PropTypes.object
  };

Answer 9

অন্য উপাদানতে নেভিগেট করতে আপনি ব্যবহার করতে পারেন this.props.history.push('/main');

import React, { Component, Fragment } from 'react'

class Example extends Component {

  redirect() {
    this.props.history.push('/main')
  }

  render() {
    return (
      <Fragment>
        {this.redirect()}
      </Fragment>
    );
   }
 }

 export default Example

Comments

প্রতিক্রিয়াটি একটি সতর্কতা ছুড়ে দেয়: Warning: Cannot update during an existing state transition (such as within রেন্ডার করুন). Render methods should be a pure function of props and state.

— রোবোট্রন

Answer 10

অন্য উপাদানটিতে নেভিগেট করার সহজ সমাধানটি হল (উদাহরণ আইকনে ক্লিক করে মেল উপাদানগুলিতে নেভিগেট করে):

<MailIcon 
  onClick={ () => { this.props.history.push('/mails') } }
/>

Answer 11

বিকল্পভাবে, আপনি শর্তাধীন রেন্ডারিং প্রতিক্রিয়া ব্যবহার করতে পারেন।

import { Redirect } from "react-router";
import React, { Component } from 'react';

class UserSignup extends Component {
  constructor(props) {
    super(props);
    this.state = {
      redirect: false
    }
  }
render() {
 <React.Fragment>
   { this.state.redirect && <Redirect to="/signin" /> }   // you will be redirected to signin route
}
</React.Fragment>
}