wake-up-neo.com

Verwendung von Redirect im neuen React-Router von Reactjs

Ich verwende das letzte Version des Reakt-Router-Moduls namens Reakt-Router-Dom, das bei der Entwicklung von Webanwendungen mit React zur Standardeinstellung geworden ist. Ich möchte wissen, wie eine Umleitung nach einer POST -Anforderung durchgeführt wird. Ich habe diesen Code erstellt, aber nach der Anfrage passiert nichts. Ich überprüfe im Web, aber alle Daten beziehen sich auf frühere Versionen des Reakt-Routers und nicht auf die letzte Aktualisierung.

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;
65
maoooricio

Sie müssen setState verwenden, um eine Eigenschaft festzulegen, die den <Redirect> in Ihrer render()-Methode wiedergibt.

Z.B.

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/>;
}

Ein Beispiel finden Sie auch in der offiziellen Dokumentation: https://reacttraining.com/react-router/web/example/auth-workflow


Das heißt, ich würde Ihnen vorschlagen, den API-Aufruf in einen Dienst oder so zu integrieren. Dann können Sie einfach das history-Objekt verwenden, um programmgesteuert zu routen. So funktioniert die Integration mit redux .

Aber ich denke, Sie haben Ihre Gründe, dies so zu tun.

114

Hier ein kleines Beispiel als Antwort auf den Titel, da alle genannten Beispiele meiner Meinung nach ebenso kompliziert sind wie das offizielle.

Sie sollten wissen, wie es2015 transpiliert wird und Ihr Server für die Weiterleitung geeignet ist. Hier ist ein Ausschnitt für den Express. Weitere Informationen dazu finden Sie hier .

Stellen Sie sicher, dass dies unter allen anderen Routen steht.

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

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

Dies ist die .jsx-Datei. Beachten Sie, wie der längste Weg zuerst kommt und allgemeiner wird. Für die allgemeinsten Routen verwenden Sie das genaue Attribut.

// 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); 
16
Matthis Kohli

Versuchen Sie so etwas. 

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;
4
KornholioBeavis

Um zu einer anderen Komponente zu navigieren, können Sie this.props.history.Push('/main'); verwenden.

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
1
Morris S

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

Um zu einer anderen Seite zu navigieren, habe ich prop-types installiert. Dann importiere ich es in die entsprechende Komponente. Und ich benutzte this.context.router.history.Push('/about'). Und es wird navigiert.

Mein Code lautet

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
  };
1
sojan

Die einfachste Lösung, um zu einer anderen Komponente zu navigieren, ist (Beispiel: Navigiert zur E-Mail-Komponente, indem Sie auf das Symbol klicken):

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

Rufen Sie es einfach in einer beliebigen Funktion auf. 

this.props.history.Push('/main');
0
Masum Billah

sie können zu diesem Zweck ein Hoc schreiben und eine Methodenumleitung schreiben, hier ist der Code: 

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;
0
zia