路由嵌套

取消精准匹配

list.js

V6

// Router.tsx

import React from “react”;

import { BrowserRouter, Route, Routes } from “react-router-dom”;

import Home from “../home/Home”;

import Goods from “../goods/Goods”;

import Customer from “../customer/Customer”;

import NotFound from “../not-found/NotFound”;

import GoodsDetail from “../goods/goods-detail/GoodsDetail”;

import GoodsList from “../goods/goods-list/GoodsList”;

export default function Router() {

return (

<BrowserRouter>
  <Routes>
    <Route path='/' element={<Home />}>
      <Route path='goods' element={<Goods />} >
        {/* 动态路由 */}
        <Route path="<font style="color:#F5222D;">:id</font>" element={<GoodsDetail />}/>
        <Route path="list" element={<GoodsList />}/>
      </Route>
      <Route path='customer' element={<Customer />} ></Route>
    </Route>
    <Route path="*" element={<NotFound />} /> 
  </Routes>
</BrowserRouter>

);

}

// Home.tsx

import React from “react”;

import { Outlet, Link } from “react-router-dom”;

export default function Home() {

return (

<div>
  <h1>Home</h1>
  <p>
    <Link to='<font style="color:#F5222D;">/goods</font>'>to goods</Link>
  </p>
  <p>
    <Link to='/customer'>to customer</Link>
  </p>
  <font style="color:#F5222D;"><Outlet /></font>
</div>

);

}

// Goods.tsx

import React from “react”;

import { useNavigate, Outlet } from “react-router-dom”;

export default function Goods() {

const navigate = useNavigate();

const handleClickToHome = () => {

navigate("/");
// history 的 replace 模式
// navigate("/", { replace: true });

};

return (

<div>
  <h2>Goods Page</h2>
  <button onClick={handleClickToHome}>to Home</button>
 <font style="color:#F5222D;"> {/* 子路由的占位组件 */}</font>

</div>

);

}