ReactJS：嵌套导航不起作用，未到达预期页面

Question

使用 React^16.13.1和 react-router-dom ^5.2.0，我们有多个导航文件来进行嵌套导航，第一个Navigation.js可以正常运行和重定向，但第二个Navigation.js不能按我们预期的那样工作。

使用创建了一个反应APPnpx 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;

nested/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 属性中。来自 react-router Docs 的 codesandbox还要从欢迎中删除确切的内容。子路线不太可能与 exact 一起工作，因为它们不完全是那条路线！