当前位置：首页 > news >正文

react - ReactRouter—— 路由传参

news 来源：原创 2025/6/27 10:04:36

什么是前端路由？

一个路径path对应一个component当我们在浏览器中访问一个path的时候，path对应的组件会在页面中进行渲染

简介 | React Router 中文文档

创建路由开发环境

使用路由我们还是采用CRA创建项目的方式进行基础环境配置

安装router

npm i react-router-dom

router配置

新建router文件

import Login from '../page/Login/index'
import Home from '../page/Home/index'import { createBrowserRouter } from 'react-router-dom'
const router = createBrowserRouter([{path:'/login',element:<Login></Login>},{path:'/Home',element:<Home></Home>}
])
export default router

在项目根目录index.js进行引入使用

import React from 'react'
import { createRoot } from 'react-dom/client'import App from './App'
//引入store
import store from './store/index'
import { Provider } from 'react-redux'
//引入router
import router from './router/index'
import { RouterProvider } from 'react-router-dom' const root = createRoot(document.getElementById('root'))
root.render(<RouterProvider router={router}><Provider store={store}><App /></Provider></RouterProvider>
)

路由导航

什么是路由导航？页面跳转

路由系统中的多个路由之间需要进行路由跳转，并且在跳转的同时有可能需要传递参数进行通信

声明式导航

import { Link } from 'react-router-dom'
const Login = ()=>{return (<div>我是登录页   <Link to="/home">跳转home页</Link></div>)
}
export default Login

编程式导航

import { Link ,useNavigate} from 'react-router-dom'const Home = () => {const navatigate = useNavigate() //声明return(<div>我是home页<button onClick={()=>navatigate('/login')}>点击跳转到Login页</button></div>)
};
export default Home;

导航传参

第一种拼接

传递参数

import { Link } from 'react-router-dom'
const Login = ()=>{return (<div>我是登录页   //声明式导航传参<Link to="/home?name=我是首页&id=1">跳转home页</Link>//编程式导航传参<button onClick={()=>navatigate('/login?name=我是首页&id=1')}>点击跳转到Login页</button></div>)
}
export default Login

接收参数使用useSearchParams

import { useSearchParams} from 'react-router-dom'const Home = () => {const [params] = useSearchParams()let id = params.get('id')console.log(params.get('id'),params.get('name'),id);return(<div>我是home页</div>)
};
export default Home;

第二种 params传参

注意：使用params传参需要去router进行占位

传递参数

import { Link,useNavigate } from "react-router-dom";
const Login = () => {const navatigate = useNavigate()return (<div>我是登录页<Link to="/home/我是首页/1">跳转home页1</Link><button onClick={()=>navatigate('/home/我是登录页/1')}>点击跳转</button></div>);
};
export default Login;

接受参数

import { useParams} from 'react-router-dom'const Home = () => {const params1 = useParams()console.log(params1.id,params.name);return(<div>我是home页</div>)
};
export default Home;

这样是接收不到的，需要去路由进行占位

import Login from '../page/Login/index'
import Home from '../page/Home/index'import { createBrowserRouter } from 'react-router-dom'
const router = createBrowserRouter([{path:'/login',element:<Login></Login>},{path:'/home/:name/:id',element:<Home></Home>}
])
export default router

占位后即可拿到