ReactJS: вложенная навигация не работает, не достигает ожидаемой страницы

Question

Использование React ^16.13.1 и response-router-dom ^5.2.0. У нас есть несколько файлов навигации для вложенной навигации, первый Navigation.js работает и перенаправляет нормально, но второй Navigation.js работает не так, как мы ожидали .

Создал приложение для реагирования, используя npx create-react-app nested

Список важных файлов для просмотра:

Приложение. js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Navigation from "./Navigation";
import { BrowserRouter } from "react-router-dom";

const App = () => {
  return (
    <BrowserRouter>
      <Navigation />
    </BrowserRouter>
  );
};

export default App;

Навигация. js

import React from "react";
import { Switch, Route, BrowserRouter } from "react-router-dom";

import nestedNavigation from "./nested/Navigation";
const NotFound = () => <h1>Not Found</h1>;
const Navigation = () => {
  return (
      <Switch>
        <Route exact path="/welcome" component={nestedNavigation} />
        <Route path="/" component={NotFound} />
      </Switch>
  );
};

export default Navigation;

вложенная / Навигация. js вложенная навигация - вторая

import React from "react";
import {
  Switch,
  Route,
  BrowserRouter,
  useRouteMatch,
} from "react-router-dom";

import Welcome from "../Welcome"

const Navigation = () => {
    let { path, url } = useRouteMatch();
    debugger;
    return (
        <Switch>
            <Route path={`${path}/nested`} exact component={Welcome} />
        </Switch>
    );
}

export default Navigation;

Answer 1

Вложенные маршруты требуют полного пути в самой последней полной версии React Router, добавьте остальную часть URL-адреса из верхних компонентов в свойство path. codeandbox из React-router Docs

Также удалите точное из вашего приветствия. Подмаршруты, скорее всего, не будут работать с точными, потому что это не совсем тот маршрут!