react - ReactRouter—— 路由传参

什么是前端路由？

一个路径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

占位后即可拿到