Reactjs

Question

के नए प्रतिक्रिया-राउटर-डोम में रीडायरेक्ट का उपयोग कैसे करें मैं पिछले संस्करण प्रतिक्रिया-राउटर मॉड्यूल का उपयोग कर रहा हूं, जिसका नाम प्रतिक्रिया-राउटर-डोम है, जो वेब अनुप्रयोगों को विकसित करने के लिए डिफ़ॉल्ट रूप से बन गया है। मैं जानना चाहता हूं कि POST अनुरोध के बाद पुनर्निर्देशन कैसे करें। मैं यह कोड बना रहा हूं, लेकिन अनुरोध के बाद, कुछ भी नहीं होता है। मैं वेब पर समीक्षा करता हूं, लेकिन सभी डेटा प्रतिक्रिया राउटर के पिछले संस्करणों के बारे में है, और अंतिम अद्यतन के साथ नहीं।

कोड:

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; 

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-workflow

---

कहा, मैं एक सेवा या कुछ और अंदर API कॉल डाल करने के लिए आप सुझाव है। फिर आप प्रोग्रामेटिक रूप से रूट करने के लिए history ऑब्जेक्ट का उपयोग कर सकते हैं। इस प्रकार integration with redux काम करता है।

लेकिन मुझे लगता है कि आपके पास ऐसा करने के आपके कारण हैं।

Answer 2

इस तरह कुछ कोशिश करें।

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; 

Answer 3

यहाँ सभी का उल्लेख उदाहरण के रूप में शीर्षक के जवाब के रूप में एक छोटा सा उदाहरण मेरी राय के साथ-साथ सरकारी एक में जटिल हैं।

आपको पता होना चाहिए कि कैसे es2015 को पारदर्शी करना है और साथ ही अपने सर्वर को रीडायरेक्ट को संभालने में सक्षम बनाना चाहिए। एक्सप्रेस के लिए यहां एक स्निपेट है। इससे संबंधित अधिक जानकारी here मिल सकती है।

इसे अन्य सभी मार्गों के नीचे रखना सुनिश्चित करें।

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

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

यह .jsx फ़ाइल है। ध्यान दें कि सबसे लंबा रास्ता सबसे पहले कैसे आता है और अधिक सामान्य हो जाता है। सबसे सामान्य मार्गों के लिए सटीक विशेषता का उपयोग करें।

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

// Relative 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); 

Answer 4

मैंने सरल हैक की कोशिश की। अच्छा नहीं हो सकता है लेकिन यह मेरे लिए काम करता है। मैंने घटनाओं के अंदर यह सरल कोड लिखा था। यह विशिष्ट ब्राउज़र स्थान पर रीडायरेक्ट करेगा (/path)

handleSubmit() { 
axios.post(/**/) 
    .then(() => { 
    this.setState({ redirect: true })); 
    window.location.href='/path'; 
    } 
}