React 学习——路由跳转(Link、useNavigate)、跳转时传递参数（问号传递、path中冒号拼接）

需要四个页面：项目入口index.js文件，router配置路由跳转文件，article组件页面，login组件页面

1、项目入口index.js文件

注意：要安装这个依赖  react-router-dom

import React from 'react'
import { createRoot } from 'react-dom/client'
import { RouterProvider } from 'react-router-dom'
import router from './router'const root = createRoot(document.getElementById('root'))
root.render(<RouterProvider router={router} />
)

2、router配置路由跳转文件

import React from "react";
import { createBrowserRouter } from "react-router-dom";
import Article from "../views/article";
import Login from "../views/login";const router = createBrowserRouter([{// path: '/login',path: '/login/:id/:name',//第二种传参需要修改的element: <Login />},{path: '/article',element: <Article />}
])
export default router

3、article组件页面

import { Link,useNavigate } from "react-router-dom"const Article = ()=>{const navigate = useNavigate()return (<div>文章页面<br/>{/* 声明式写法 */}<Link to='/login'>login</Link>{/* 命令式写法 */}<button onClick={()=>navigate('/login')}>跳转到login页面</button><br/>{/* 传参数 第一种：问号传递参数 link和navigate都适用 */}<Link to='/login?id=100&name=zhangsan'>login(带参数)</Link><button onClick={()=>navigate('/login?id=100&name=zhangsan')}>跳转到login页面(带参数)</button>{/* 第二种传参方式 */}<button onClick={()=>navigate('/login/2/jia')}>跳转到login页面(带参数)</button>{/* 需要再 路由配置的时候 加上 path: '/login/:id', */}</div>)
}
export default Article

4、login组件页面

import { Link, useParams, useSearchParams } from "react-router-dom"const Login = ()=>{// 第一种传参方式// const [ params ] = useSearchParams();// console.log('第一种传参',Object.fromEntries(params.entries()));// 第二种传参方式const objParams = useParams();console.log('第二种传参',objParams);return (<div>登录页面<br/><Link to='/article'>article</Link>{/* 第一种传参的页面上显示 */}{/* <ul>{Array.from(params.entries()).map(([key, value]) => (<li key={key}>{`${key}: ${value}`}</li>))}</ul> */}</div>)
}
export default Login