リアクタルータ4：プログラムで経路を変更するが、コンポーネントをレンダリングしない

Question

動作しているルートをプログラムで変更しようとしています。 urlは更新されますが、目的のコンポーネントはレンダリングされません。

マイ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; 

は今私のRegistrationFormに私が失敗フェッチする場合、私は

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

今私のAPIからデータを取得するために失敗した場合、エラー・ページに移動したいです私のAPIから、私はURLが/ errorに変わるのを見ますが、私のエラーコンポーネントはレンダリングされていません。

これは何が起こっているのですか？

Answer 1

私のApp.jsに追加した後、動作し始めました。誰かがなぜ良い説明が必要なのですか？

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;