学习router第一天，看了如何跳转和传参（Day：11）

[XJQ124]

学习router

---

1、目前看了Router V6的官网，然后写了一个demo

首先创建了两个文件，Article和Login

import { useParams, useSearchParams } from "react-router-dom"

const Article = () => {
    // const [params] = useSearchParams()
    // const id = params.get('id')
    // const name = params.get('name')
    const params = useParams()
    const id = params.id
    return <div>我是文章页{id}</div>
}
export default Article

import { Link,useNavigate } from "react-router-dom"
const Login = () => {
    const navigate = useNavigate()
    return (

    <div>
        我是登录页
        {/* 是声明式写法 */}
        <Link to="/article" >跳转到文章页</Link>
        {/* 命令式写法 */}
        <button onClick={() => navigate("/article")}>跳转到文章</button>
        <button onClick={() => navigate("/article?id=1001&name=jack")}>searchParams传参</button>
        <button onClick={() => navigate("/article/1001")}>params传参</button>

    </div>
)

}
export default Login

2、然后创建了一个Layout和about，还有一个board

import { Link, Outlet } from "react-router-dom"

const Layout = ()=>{
    return (
        <div>
            这是一级路由Layout组件
            <Link to = '/'>面板</Link>
            <Link to = '/about'>关于</Link>
            {/* 配置二级路由的出口 */}
            <Outlet />
        </div>
    )
}
export default Layout  

这里是layout的代码，里面配置了二级路由的出口

#### 3、router部分
```js
import Login from "../page/Login";
import Article from "../page/Article";
import Layout from "../layout";
import { createBrowserRouter } from "react-router-dom";
import Board from "../Board";
import About from "../about";

const router = createBrowserRouter([
    {
        path:'/',
        element:<Layout />,
        children:[
            {
                // path:'board',
                // 设计为默认的二级路由
                index:true,
                element:<Board />
            },
            {
                path:'about',
                element:<About />
            }
        ]
    },
    {
        path:'/login',
        element:<Login />
    },
    {
        path:'/article/:id',
        element:<Article />

    }
])
export default router    

这个demo是实现了一个最初的路由功能，可以实现传参和界面跳转

明日任务：

由于今天学习的是版本6的内容，公司的部分业务是版本5的，所以明天再看看版本5的部分