[React编程式路由]编写路由js文件，以及父子路由写法

最新推荐文章于 2022-11-29 19:18:27 发布

CC_Waiting

最新推荐文章于 2022-11-29 19:18:27 发布

阅读量270

点赞数

文章标签： javascript react.js 前端

本文链接：https://blog.csdn.net/CC_Waiting/article/details/126443040

版权

路由js文件

import {Navigate} from "react-router-dom"
import About from "../Pages/About";
import Home from "../Pages/Home";
import Test from "../Pages/Test";

 const routers = [
    {
        path:'/about',
        element:<About/>
    },
     {
         path: '/home',
         element: <Home/>,
         children:[
             {
                 path:'test',
                 element:<Test/>
             }
         ]
     },
     {
         path: "/",
         element:<Navigate to="/home"/>
     }
]

export default routers

App.jsx

import React from 'react';
import { NavLink, useRoutes} from "react-router-dom";
import routers from "./routes/routers";
import "./App.css"
export default function App() {
    const element = useRoutes(routers)
    return (
        <div>
            <div className={"div1"}>
                <NavLink to={"about"}>About</NavLink>
                <br/>
                <NavLink to={"home"}>Home</NavLink>
            </div>
            <div className={"div2"}>
                {element}

            </div>
        </div>
    )

}

父组件Home

//引入Outlet用于子组件展示
import React from 'react'
import {NavLink,Outlet} from 'react-router-dom'

export default function Home(){
    return(
        <div>
            <div className={"div1"}>
                <NavLink to={"/home/test"}>Test</NavLink>
                <Outlet/>
            </div>
        </div>
    )
}