亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

ReactJS:嵌套導航不起作用,未到達預期頁面

ReactJS:嵌套導航不起作用,未到達預期頁面

智慧大石 2022-12-22 12:44:59
使用 React^16.13.1和 react-router-dom ^5.2.0,我們有多個導航文件來進行嵌套導航,第一個Navigation.js可以正常運行和重定向,但第二個Navigation.js不能按我們預期的那樣工作。使用創建了一個反應APPnpx create-react-app nested列出重要文件以供審查:應用程序.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;導航.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嵌套導航-第二個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;
查看完整描述

1 回答

?
慕少森

TA貢獻2019條經驗 獲得超9個贊

嵌套路由需要最新完整版本的 React Router 中的完整路徑,將上層組件的其余 URL 添加到 path 屬性中。來自 react-router Docs 的 codesandbox

還要從歡迎中刪除確切的內容。子路線不太可能與 exact 一起工作,因為它們不完全是那條路線!


查看完整回答
反對 回復 2022-12-22
  • 1 回答
  • 0 關注
  • 76 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號