react-route-dom 实现简单的嵌套路由

最终效果
点击 to test1

react-route-dom 实现简单的嵌套路由_第1张图片

点击to test2  =>  to test21

react-route-dom 实现简单的嵌套路由_第2张图片
点击to test2  =>  to test22
react-route-dom 实现简单的嵌套路由_第3张图片
代码如下
 

          path: "page",
          element: <父组件 />,
          children: [
            { path: "test1", element:  },
            {
              path: "test2",
              element: ,
              children: [
                { path: "test21", element:  },
                { path: "test22", element:  },
              ],
            },
          ],

父组件如下 

   import { NavLink, Outlet } from "react-router-dom";    

         
I am 父组件
to test1
to test2

test1组件

import React from "react";
const Test1 = () => {
  return 
I am test1
; }; export default Test1;

test2组件

import React from "react";
import { NavLink, Outlet } from "react-router-dom";

const Test2 = () => {
  return (
    
I am test2 {/* link */}
to test21
to test22
); }; export default Test2;

test21组件
​​​​​​​

import React from "react";
const Test21 = () => {
  return 
I am test21
; }; export default Test21;

test22组件

import React from "react";
const Test22 = () => {
  return 
I am test22
; }; export default Test22;

你可能感兴趣的:(嵌套路由,react)