reat-router之配置实现路由管理

useRoutes 可以将数组对象形式的路由，直接在页面上使用。官网

const routers = [
    {
        path:"/",
        element:<Home/>
    },
    {
        path:"/about",
        element:<About/>,
        children:[
            {
                path:"/about",
                element:<AboutChild/>
            }
        ]
    },
    {
        path:"*",
        element:<Navigate to="/"/>
    },
]


export default function App(){
    const element = useRoutes(routers)
    return (
        <>
        {element}
        </>
    )
}

1. useRoutes 钩子允许我们使用js对象的形式来定义路由，函数最终返回匹配的React元素，如果没有匹配到则返回null
2. 这些数组中的对象，拥有与<Router>相同的属性