react中路由跳转以及路由传参

一、路由跳转

1.安装插件

npm install react-router-dom

2.路由配置

路由配置：react中简单的配置路由-CSDN博客

3.实现代码

// src/page/index/index.js

// 引入
import { Link, useNavigate } from "react-router-dom";

function IndexPage() {
  const navigate = useNavigate()
  return (
    <div>
      欢迎来到index
      {/* 声明式是导航 */}
      <div>
        <Link to="/login">跳转到login</Link>
      </div>
      {/* 编程式导航 */}
      <div>
        <button onClick={() => navigate('/login')}>跳转到login</button>
      </div>
    </div>
  );
}

export default IndexPage;

4.效果

跳转前

跳转后

5.说明

声明式导航：会当做<a />使用，因此会出现a标签的样式，一般用于菜单这样不需要调用方法，直接点击就跳转这样的时候；

编程式导航：一般用于需要触发方法做一些逻辑操作后再跳转的场景

二、路由传参

说明：传参方式有两种，获取参数方式对应也是两种；这里两种传参方式同时编写，注释的是searchParams方式传参，没注释的是params方式传参

1.安装插件

npm install react-router-dom

2.路由配置

src/router/index.js

// 1.引入方法，用于创建路由实例
import { createBrowserRouter } from 'react-router-dom' 

// 2.引入组件
import LoginPage from '../page/login';
import IndexPage from '../page/index';

// 3.创建router实例，配置路由
const router = createBrowserRouter([ 
  {
    // path:"/login", // searchParams方式传参
    path:"/login/:id/:name", // params方式传参
    element:<LoginPage></LoginPage> // 渲染页面的地方
  },
  {
    path:"/index",
    element:<IndexPage></IndexPage>
  },
  {
    path:"",
    element:<div>欢迎来到首页</div>
  }
])

// 4.暴露路由实例，用于在App.js主入口组件
export default router;

3.实现代码

src/page/index/index.js

// src/page/index/index.js

// 引入
import { Link, useNavigate } from "react-router-dom";

function IndexPage() {
  const navigate = useNavigate()
  return (
    <div>
      欢迎来到index
      {/* 声明式是导航 */}
      <div>
        {/* searchParams方式传参 */}
        {/* <Link to="/login?id=1&name=一之濑帆波">跳转到login</Link> */}
        {/* params方式传参 */}
        <Link to="/login/1/一之濑帆波">跳转到login</Link>
      </div>
      {/* 编程式导航 */}
      <div>
        {/* searchParams方式传参 */}
        {/* <button onClick={() => navigate('/login?id=1&name=一之濑帆波')}>跳转到login</button> */}
        {/* params方式传参 */}
        <button onClick={() => navigate('/login/1/一之濑帆波')}>跳转到login</button>
      </div>
    </div>
  );
}

export default IndexPage;

src/page/login/index.js

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


function LoginPage() {
  // searchParams方式传参
  // const [params] = useSearchParams();
  // const name = params.get('name'); // 通过get方法来获取数据
  // const id = params.get('id'); // // 通过get方法来获取数据

  // params方式传参
  const params = useParams();
  const name = params.name;
  const id = params.id;
  return (
    <div>
      {name} 欢迎来到login-{id}
    </div>
  );
}

export default LoginPage;

src/App.js

import React, { useState, useRef, useEffect, useContext, createContext } from 'react';
// 1.引入
import { RouterProvider } from 'react-router-dom'
import router from './router';



function App() {
  return (
    <div>
      {/* 2.绑定 */}
      <RouterProvider router={router}></RouterProvider>
    </div>
  );
}

export default App;