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