Réagissez le routeur 4: changez l'itinéraire par programme mais pas le composant de rendu

Question

J'essaie de modifier par programme un itinéraire qui fonctionne. L'URL est mise à jour mais le composant souhaité n'est pas rendu.

Mon app.js

import React, {Component} from 'react'; 
import { 
    BrowserRouter as Router, 
    Route 
} from 'react-router-dom' 
import {addLocaleData, IntlProvider, FormattedMessage} from 'react-intl'; 
import en from 'react-intl/locale-data/en'; 
import fr from 'react-intl/locale-data/fr'; 
import it from 'react-intl/locale-data/it'; 
import de from 'react-intl/locale-data/de'; 


import Header from './components/Header'; 
import RegistrationForm from './components/RegistrationForm'; 
import Error from './components/Error'; 
import Footer from './components/Footer'; 

import intlMessagesDe from './i18n/de.json'; 
import intlMessagesFr from './i18n/fr.json'; 
import intlMessagesIt from './i18n/it.json'; 
import intlMessagesEn from './i18n/en.json'; 

addLocaleData([...en, ...fr, ...de, ...it]); 

let i18nConfig = { 
    locale: 'en', 
    messages: intlMessagesEn 
}; 

class App extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     locale: 'en', 
    }; 
    } 

    onChangeLanguage(lang) { 
    switch (lang) { 
     case 'de': 
     i18nConfig.messages = intlMessagesDe; 
     break; 
     case 'fr': 
     i18nConfig.messages = intlMessagesFr; 
     break; 
     case 'it': 
     i18nConfig.messages = intlMessagesIt; 
     break; 
     case 'en': 
     i18nConfig.messages = intlMessagesEn; 
     break; 
     default: 
     i18nConfig.messages = intlMessagesEn; 
     break; 
    } 
    this.setState({locale: lang}); 

    i18nConfig.locale = this.state.locale; 
    } 

    render() { 
    return (
     <Router history={history}> 
     <IntlProvider key={i18nConfig.locale} locale={i18nConfig.locale} messages={i18nConfig.messages}> 
      <div className="App"> 
      <FormattedMessage id="app.welcome" defaultValue="app.welcome"/> 
      <Header/> 
      <Route exact path="/" render={() => <RegistrationForm 
       onChangeLanguage={this.onChangeLanguage.bind(this)} activeLocale={this.state.locale} />} 
      /> 
      <Route path="/error" render={() => <Error 
       activeLocale={this.state.locale}/>}/> 
      <Footer/> 
      </div> 
     </IntlProvider> 
     </Router> 
    ); 
    } 
} 

export default App; 

Maintenant, dans mon RegistrationForm Je veux passer à une page d'erreur si je ne parviens pas à récupérer les données de mon API

import React, {Component} from 'react'; 
import {withRouter} from 'react-router-dom' 

class RegistrationForm extends Component { 

    constructor(props) { 
    super(props); 
    } 

    componentDidMount() { 
    SomeAPI.getData(
     date => { 
      this.setState({data}) 
     } 
     } 
    ).catch((error) => { 
     console.log("error", error); 
     this.setState({ 
     fetchInProgress: false 
     }) 
     //navigating 
     this.props.history.push("/error"); 
    }); 
    } 

    render() { 
     return (
     <div className="content"> 
      Text 
     </div> 
    ); 
    } 
    } 
} 

export default withRouter(RegistrationForm); 

Maintenant, si je ne l'iront chercher de mon API, je vois que l'URL change en/error mais mon composant d'erreur n'est pas rendu.

Des idées pour lesquelles cela se passe?

Answer 1

Après avoir ajouté à mon App.js il a commencé à travailler. Est-ce que quelqu'un a une bonne explication pourquoi est nécessaire?

import React, {Component} from 'react'; 
import { 
    BrowserRouter as Router, 
    Route, 
    Switch 
} from 'react-router-dom' 
import {addLocaleData, IntlProvider, FormattedMessage} from 'react-intl'; 
import en from 'react-intl/locale-data/en'; 
import fr from 'react-intl/locale-data/fr'; 
import it from 'react-intl/locale-data/it'; 
import de from 'react-intl/locale-data/de'; 


import Header from './components/Header'; 
import RegistrationForm from './components/RegistrationForm'; 
import Error from './components/Error'; 
import Footer from './components/Footer'; 

import intlMessagesDe from './i18n/de.json'; 
import intlMessagesFr from './i18n/fr.json'; 
import intlMessagesIt from './i18n/it.json'; 
import intlMessagesEn from './i18n/en.json'; 

addLocaleData([...en, ...fr, ...de, ...it]); 

let i18nConfig = { 
    locale: 'en', 
    messages: intlMessagesEn 
}; 

class App extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     locale: 'en', 
    }; 
    } 

    onChangeLanguage(lang) { 
    switch (lang) { 
     case 'de': 
     i18nConfig.messages = intlMessagesDe; 
     break; 
     case 'fr': 
     i18nConfig.messages = intlMessagesFr; 
     break; 
     case 'it': 
     i18nConfig.messages = intlMessagesIt; 
     break; 
     case 'en': 
     i18nConfig.messages = intlMessagesEn; 
     break; 
     default: 
     i18nConfig.messages = intlMessagesEn; 
     break; 
    } 
    this.setState({locale: lang}); 

    i18nConfig.locale = this.state.locale; 
    } 

    render() { 
    return (
     <Router history={history}> 
     <Switch> 
      <IntlProvider key={i18nConfig.locale} locale={i18nConfig.locale} messages={i18nConfig.messages}> 
       <div className="App"> 
       <FormattedMessage id="app.welcome" defaultValue="app.welcome"/> 
       <Header/> 
       <Route exact path="/" render={() => <RegistrationForm 
        onChangeLanguage={this.onChangeLanguage.bind(this)} activeLocale={this.state.locale} />} 
       /> 
       <Route path="/error" render={() => <Error 
        activeLocale={this.state.locale}/>}/> 
       <Footer/> 
       </div> 
      </IntlProvider> 
      </Switch> 
     </Router> 
    ); 
    } 
} 

export default App;