react 路由

url路径与组件对应的关系

安装插件

npm i react-router-dom

设置路由

在项目的最外层定义路由

// 导入 BorwserRouter组件 或 
import {BorwserRouter} from 'react-router-dom';
// 使用BorwserRouter组件包裹整个项目
<BorwserRouter>
      <App/>
</BorwserRouter>

配置路由规则

// 导入 Route,Routes
import {Route,Routes} from 'react-router-dom';

// 配置路由规则
<Routes>
  //  path 配置路由路径   element是路径对应的组件
  //  path 为 '/' 时为默认路由
  <Route path='/login' element={<组件/>}></Route>
</Routes>

路由嵌套

 <Route path='/login' element={<组件/>}>
      // index 代表父级路由下的默认路由
        <Route index element={二级组件}></Route>
      <Route path='二级组件路径不加/' element={二级组件}></Route>
</Route>
// 导入 Outlet 组件
// 在一级组件中要显示二级路由的位置添加 Outlet 组件 对应的二级组件就会显示到Outlet的位置

路由跳转

import {Link} from 'react-router-dom';
//  Link 组件 作为跳转按钮 to 属性对应路由路径
<Link to='路径'></Link>

编程式跳转

// 导入 useNavgate 
import {useNavgate} from 'react-router-dom';

//事件处理程序
const navgate = useNavgate()
const handleclick = ()=>{
  // 路由跳转
    navgate('路径')
}

参数传递

// 在 Route 组件 path路径 添加 /:属性 规定路由传递的参数
<Route path='/index/:id' element={<Index />}></Route>

// 传递 
// Link组件 在路径后加/值 即可传递参数
<Link to='/index/1'></Link>

// 接收
  // 导入  useParams 函数
  import {useParams} from 'react-router-dom';

    // 使用
    const params = useParams
  params.id // 拿到的数据

查询参数

// 使用 ? 属性=属性值 方式传递参数

// 接收 
// 导入 useSearchParams 
const [searchParams,setSearchParams] = useSearchParams()
// searchParams 具体的参数对象  名字可以随意起
// setSearchParams 更新参数的方法  名字可以随意起

// 获取参数
searchParams.get('属性')
// 获取参数存放到数组中
searchParams.getAll('属性')

使用router配置路由规则

const router = [
  {
    // 路径
      path:'/',
    // 组件
    element:<组件/>,
    // 子组件
    children:[
      {
        // 默认子路由
          index:true,
        element:<默认子组件/>
      },
      {
        // 需要参数的子组件
       path:'index/:id'
        element:<子组件1/>
      },
    ]
  }
]

export default router

// 在 app.js 中 
// 导入 useRoutes 函数
// 导入路由规则
在app组件内 
return useRoutes(router)

组件懒加载

// 布局或一些固定的组件不要使用懒加载
import {lazy , Suspense} from 'react';
const Login = lazy(()=>import(路径))

// 为懒加载的组件添加loding效果
const lazyLoad = (children) =>{
    return <Suspense fallback={loging效果组件}>{return userRouter(children)}<Suspense>
}

 // 路由的element   
    element:lazyLoad(<Index/>)