Как правильно перенаправить на динамическую страницу с помощьюactjs?404 страница недоступна

Question

Я должен исправить код, созданный другим разработчиком, потому что {Error404} недоступен.Код как есть, отправляет каждую страницу, отличную от ранее указанных путей, на InternalPage page = {page}.Поэтому, когда site / {route} не существует, вместо страницы 404, настроенной в компоненте Route, появляется пустой HTML-файл InternalPage.

import React, { Component } from "react";
import PropTypes from 'prop-types';
import { BrowserRouter, Route, Switch } from "react-router-dom";

import Home from "./containers/Home";
import Results from "./containers/Results";
import Pages from "./containers/Pages";
import Inspiration from "./containers/Inspiration";

import Header from "./components/Header";
import Footer from "./components/Footer";
import Error404 from "./components/Error404";

import PagesNav from "./components/PagesNav";
import InternalPage from "./components/InternalPage";

const internalPages = [
  "About",
  "Terms",
  "Help",
  "Cookies",
  "Privacy",
  "Partnerships"
]

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      lang:"en",
      currency: "EUR"
    }
  }
  componentWillMount() {
    var lang = navigator.language || navigator.userLanguage;
    lang = lang.split("-")[0] === "it" ? "it" : "en";
    this.setState({lang})
  }
  render() {
    return (
        <BrowserRouter>
          <div>
            <Route render={() => <Header changeLang={lang => this.setState({lang})} lang={this.state.lang} changeCurrency={currency => this.setState({currency})} currency={this.state.currency}/>} />
            <Switch>
              <Route exact path="/" render={() => <Home lang={this.state.lang} currency={this.state.currency}/>} />
              <Route exact path="/Results" render={() => <Results lang={this.state.lang} currency={this.state.currency} mixpanel={this.context.mixpanel}/>} />
              <Route exact path="/Inspiration" render={() => <Inspiration lang={this.state.lang} currency={this.state.currency} mixpanel={this.context.mixpanel}/>} />
                <Pages>
                  <PagesNav />
                  <article>
                    {internalPages.map(page => <Route key={page} exact path={`/${page}`} render={() => <InternalPage page={page} lang={this.state.lang}/>}/>)}
                  </article>
              </Pages>
              <Route component={Error404} />
            </Switch>
            <Route render={() => <Footer changeLang={lang => this.setState({lang})} lang={this.state.lang}/>} />
        </div>
      </BrowserRouter>
    )
  }
}
App.contextTypes = {
  mixpanel: PropTypes.object.isRequired
}
export default App;

Не могли бы вы указать лучший способ решения этой проблемы маршрутизации?Я пробовал несколько других вариантов безуспешно, то есть страница 404 появляется, но путь к / [InternalPages] нарушается.

Answer 1

Поместите не точный маршрут внизу вашего кода маршрутизации, который приведет любые не указанные страницы к вашему 404 компоненту:

<Route path="/" component={Error404} />