Hoe Redirect te gebruiken in de nieuwe react-router-dom van Reactjs

Ik gebruik de laatste versie react-router module, genaamd react-router-dom, die de standaard is geworden bij het ontwikkelen van web applicaties met React. Ik wil weten hoe ik een redirection kan maken na een POST request. Ik heb deze code gemaakt, maar na het verzoek gebeurt er niets. Ik beoordelen op het web, maar alle gegevens is over eerdere versies van de react-router, en geen met de laatste update.

Code:

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;
jupiar
Bewerkte vraag 9de6 december 2018 в 9:11
Programmering
javascript reactjs react-router
5de2 april 2017 в 11:42
4 views
Oplossing

Je moet setState gebruiken om een eigenschap in te stellen die de `zal renderen in jerender()` methode.

Bijv.

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

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

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

     if (redirect) {
       return ;
     }

     return ;
}

U kunt ook een voorbeeld zien in de officiële documentatie: https://reacttraining.com/react-router/web/example/auth-workflow

Dat gezegd hebbende, zou ik je aanraden om de API call in een service of zoiets te plaatsen. Dan zou je gewoon het history object kunnen gebruiken om programmatisch te routeren. Dit is hoe de integratie met redux werkt.

Maar ik denk dat jij je redenen hebt om het op deze manier te doen.

Sebastian Sebald
Bewerkt antwoord 14de0 januari 2019 в 7:19
Commentaren (6)

Hier een klein voorbeeld als antwoord op de titel, want alle genoemde voorbeelden zijn naar mijn mening ingewikkeld, evenals de officiële.

Je moet weten hoe je es2015 moet transporteren en je server in staat stellen om de redirect te verwerken. Hier is een snippet voor express. Meer info hierover kan gevonden worden hier.

Zorg ervoor dat je dit onder alle andere routes zet.

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

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

Dit is het .jsx bestand. Merk op hoe het langste pad eerst komt en algemener wordt. Voor de meest algemene routes gebruik je het exacte attribuut.

// 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 = () => (





       ()} />          



);

ReactDOM.render(, root);
Matthis Kohli
Bewerkt antwoord 25ste0 maart 2019 в 3:25
Commentaren (3)

Probeer zoiets als dit.

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
?  
: 
)}

  render() {
    return (
      <div className={styles.section}>
        <div className={styles.container}>

         {renderMe()}
          <Footer />
        </div>
      </div>
    );
  }
}

export default SignUpPage;
Commentaren (3)