react-router-dom

router包裹顺序：BrowserRouter-Routes-Route-Route-Route，Route无限嵌套。
<route path="/user/:id" element={<Courses>}>
path:路由地址  :id: 动态传参数 element: 对应的组件
import {useParams, useEffect} from 'react-router-dom'
const { id } = useParams() 获取动态参数
useEffect(()=>{}, [id]) //当ID发生改变时触发副作用。
import { Outlet } from 'react-router-dom'
const products = () =>{
    return (
        <div>
            <h1>产品列表(父组件)</h1>
        </div>
    )
}
outlet:子组件占位符。子组件在父组件的什么位置展示。
<link to="/products/new"> 页面跳转路由
从身体navigate = useNavigate()
navigate('/home')
navigate('/success', {state:{message:'登陆成功'}})
navgate(-1) navigate(2)
navigate('/edit', {replace: true}) 编程式跳转
useLocation: 获得当前路由信息（获取navigate传递的状态数据）
useRoutes函数是编程函数。
// 定义路由配置
const routes = [
    {path:'/', element:<Home />}
    {path:'/about', element:<About />}
    {path: '/user',
    element: <UsersLayout />
        children: [
        {index: true, elment:<UserList>}, // 默认子路由
        {path: 'new', elment:<NewUser />}
        }
        ]
    }
]
const element = useRoutes(routes)