Я реализую маршрут без совпадения , это странно, что он отображается с каждым указанным маршрутом, а также для не указанного (это должно быть), поэтому он отображается все время.

Вот некоторый код для просмотра: Компонент RouterNavigation, который генерирует {amp}lt;Route /{amp}gt; с использованием переданного массива и в конце добавляет один {amp}lt;Route /{amp}gt; для 404.

  {amp}lt;Fragment{amp}gt; {RouteConfig.map((route, i) ={amp}gt; ( {amp}lt;Route render={({ location }) ={amp}gt; route.isProtected ? ( isAuthenticated ? ( route.component ) : ( {amp}lt;Redirect to={{ pathname: "/login", state: { from: location } }} /{amp}gt; ) ) : ( route.component ) } exact={route.path === "/" ? true : false} path={route.path} key={i} /{amp}gt; ))} {amp}lt;Route key={RouteConfig.length} path="*" render={({ location }) ={amp}gt; { return ( {amp}lt;SuspenseContainer{amp}gt; {amp}lt;PageNotFound from={location.pathname} /{amp}gt; {amp}lt;/SuspenseContainer{amp}gt; ); }} /{amp}gt; {amp}lt;/Fragment{amp}gt; 

Импортирую мой компонент RouterNavigation в код App.tsx:

  {amp}lt;Router{amp}gt; {amp}lt;Switch{amp}gt; {amp}lt;RouterNavigation /{amp}gt; {amp}lt;/Switch{amp}gt; {amp}lt;/Router{amp}gt; 

После рендеринга

реагировать роутер пользовательский интерфейс

реагировать маршрут

Код компонента RouterNavigation

Код компонента приложения

URL приложения

Обновление: Одна вещь, замеченная в том, что когда мы создаем маршрут динамически, маршрут 404 рендерится все время, ниже приведен URL-адрес, который содержит тот же пример из маршрута response-router-dom для маршрута 404 с небольшим рефакторингом (то есть, принимая участие в маршруте и создавая компонент, который оказывает то же, что и мы)

https://codesandbox.io/embed/react-router-no-match-404-8eiv9?fontsize=14{amp}amp;hidenavigation=1{amp}amp;theme=dark

Пакет JSON

 "react": "^16.12.0", "react-dom": "^16.12.0", "react-redux": "^7.1.3", "react-router-dom": "^5.1.2", 

Вместо Fragment используйте Switch

 {amp}lt;Switch{amp}gt; //routes go here {amp}lt;Route ... /{amp}gt; ... {amp}lt;/Switch{amp}gt; 

Здесь: https://codesandbox.io/s/react-router-no-match-404-bn9yg

Route должен быть прямым потомком Switch а Switch вне RouterNavigation является посторонним, поэтому мы можем удалить его:

 {amp}lt;Router{amp}gt; {amp}lt;RouterNavigation /{amp}gt; {amp}lt;/Router{amp}gt; 

отредактировано в CodeSanbox выше.

Вместо того, чтобы использовать

  {amp}lt;Router{amp}gt; {amp}lt;Switch{amp}gt; {amp}lt;RouterNavigation /{amp}gt; {amp}lt;/Switch{amp}gt; {amp}lt;/Router{amp}gt; 

который должен работать, так как {amp}lt;Fragment{amp}gt; позволяет группировать список дочерних элементов без добавления дополнительных узлов в DOM.

Использование в одном компоненте работы

 {amp}lt;Switch{amp}gt; {RouteConfig.map((route, i) ={amp}gt; ( {amp}lt;Route render={({ location }) ={amp}gt; route.isProtected ? ( isAuthenticated ? ( route.component ) : ( {amp}lt;Redirect to={{ pathname: "/login", state: { from: location } }} /{amp}gt; ) ) : ( route.component ) } exact={route.path === "/" ? true : false} path={route.path} key={i} /{amp}gt; ))} {amp}lt;Route key={RouteConfig.length} path="*" render={({ location }) ={amp}gt; { return ( {amp}lt;SuspenseContainer{amp}gt; {amp}lt;PageNotFound from={location.pathname} /{amp}gt; {amp}lt;/SuspenseContainer{amp}gt; ); }} /{amp}gt; {amp}lt;/Switch{amp}gt;