反应路由器4：以编程方式更改路由，但不呈现组件

Question

我试图以编程方式更改正在工作的路由。网址已更新，但未呈现所需的组件。

我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我想，如果我无法从我的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); 

如果我不取移动到一个错误页面从我的API我看到URL更改为/错误，但我的错误组件不呈现。

任何想法为什么会发生这种情况？

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;