React Router 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更改为/ 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;