使用 React^16.13.1和 react-router-dom ^5.2.0,我們有多個(gè)導(dǎo)航文件來(lái)進(jìn)行嵌套導(dǎo)航,第一個(gè)Navigation.js可以正常運(yùn)行和重定向,但第二個(gè)Navigation.js不能按我們預(yù)期的那樣工作。使用創(chuàng)建了一個(gè)反應(yīng)APPnpx create-react-app nested列出重要文件以供審查:應(yīng)用程序.jsimport 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;導(dǎo)航.jsimport 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嵌套導(dǎo)航-第二個(gè)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;
ReactJS:嵌套導(dǎo)航不起作用,未到達(dá)預(yù)期頁(yè)面
智慧大石
2022-12-22 12:44:59