重庆seo标准网站优化工具分析工具

示例

• 这里我创建两个页面，分别是主页和登录页
• 分别使用编程式导航和声明式导航进行页面跳转
• 登录按钮：编程式导航
• 主页标签：声明式导航
  

React-Router

1. 导入createBrowserRouter和RouterProvider
2. 创建Router实例对象并且配置路由对应关系
3. 路由绑定

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { createBrowserRouter,RouterProvider } from 'react-router-dom';//配置路由
const router = createBrowserRouter([{path:'/login',element:<div>我是登录页</div>},{path:'/index',element:<div>我是主页</div>}
])const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode>//路由绑定<RouterProvider router={router}></RouterProvider></React.StrictMode>
);

抽象路由模块

• 对页面和路由进行封装抽离

步骤：

1. 准备一个page文件夹存放页面内容，并进行导出

const Index = ()=>{return <div>我是主页</div>
}export default Indexconst Login = ()=>{return <div>我是登录页</div>
}export default Login

2. 准备一个router文件夹创建路由实例配置路由，并导出

import { createBrowserRouter,RouterProvider } from "react-router-dom";
import Login from "../page/login";
import Index from "../page/index";//配置路由
const router = createBrowserRouter([{path:'/login',element:<Login />},{path:'/index',element:<Index />}
])export default router

3. 在主文件中引入并绑定

import { RouterProvider } from 'react-router-dom';
//导入路由
import router from './router';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><RouterProvider router={router}></RouterProvider></React.StrictMode>
);

路由导航

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

声明式导航

• 通过在模版中通过<Link />组件描述出要跳转到哪里去，比如后台管理系统的左侧菜单
  <Link to="/index">主页</Link>

注意：浏览器在渲染时会将其解析为<a>标签

编程式导航

• 通过useNavigate钩子得到导航方法，然后通过调用方法以命令式的形式进行路由跳转，例如登录完成后自动跳转到主页

import { useNavigate } from "react-router-dom"
const Login = ()=>{const navigate = useNavigate()return <div><p>我是登录页</p><button onClick={()=>navigate('/index')}>登录</button></div>
}export default Login

路由导航传参

searchParams传参

1. 在起始页面通过拼接字符串的方式传递参数

import { useNavigate } from "react-router-dom"
const Login = ()=>{const navigate = useNavigate()return <div><p>我是登录页</p><button onClick={()=>navigate('/index?id=1&name=miraculous')}>searchParams传参</button></div>
}export default Login

2. 在目标页面使用useSearchParams接收参数

import { useSearchParams } from "react-router-dom"const Index = ()=>{//在目标页面接收参数const [params] =  useSearchParams()console.log(params);const id = params.get('id')const name = params.get('name')return <div>我是主页 {id} {name}</div>
}export default Index

params传参

• 在目标页面使用useParams接收参数
• 注意：params传参需要在router中加入占位符
  path:'/index/:id'
• 示例：

<button onClick={()=>navigate('/index/1')}>params传参</button>//在目标页面接收参数
const params = useParams()
const id = params.id
return <div>我是主页 {id}</div>

嵌套路由配置

• 在一级路由中又内嵌了其他路由，这种关系叫做嵌套路由
• 实现步骤：
  • 使用children属性配置路由嵌套关系
  • 使用<Outlet />组件配置二级路由渲染位置

默认二级路由

• 当访问的是一级路由时，默认的二级路由组件可以得到渲染，只需要在二级路由的位置去掉path，设置index属性为true

404路由配置

• 当浏览器输入url的路径在整个路由配置中都找不到对应的path，为了用户体验，可以使用404兜底组件渲染
• 步骤：
  • 准备一个NotFound组件
  • 在路由表数组的末尾，以*号作为路由path配置路由

两种路由模式

• 各种主流框架的路由常用的路由模式有两种，history模式和hash模式，ReactRouter分别由createBrowerRouter和createHashRouter函数负责创建

如何选择

• 简单应用或需要快速开发：选择 Hash 模式，因为它无需服务器配置，开发起来更加简单。
• 复杂应用或注重用户体验和 SEO：选择 History 模式，但需要确保服务器配置正确，以避免刷新页面时出现 404 错误。