快速开始
-
创建项目并安装所有依赖
npx create-react-app react-router-pro -
安装最新的reactrouter包
npm i react-router-dom -
启动项目
npm run start
搭建路由（index.js)
//index.js项目的入口 从这里开始运行
//react必要的两个核心包
import React from 'react';
import ReactDOM from 'react-dom/client';
//导入项目的根组件
import App from './App';
import {createBrowserRouter,RouterProvider} from 'react-router-dom'
//路由配置
const router = createBrowserRouter([
{
path:'/login',
element: <div>我是登录页</div>
},
{
path:'/article',
element: <div>我是文档页</div>
},
])
//把app根组件渲染到id为root的节点上
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
/* 路由绑定 */}
<RouterProvider router={router}></RouterProvider>
</React.StrictMode>
);
抽象路由模块
创建两个文件夹 page和router
page文件夹下的login文件夹下的login.js（article同理）
const Login = () =>{
return <div>我是登录页</div>
}
export default Login
在router下的index.js中配置路由并导出
import Login from "../page/Login";
import Article from "../page/Article";
import { createBrowserRouter } from "react-router-dom";
//配置
const router = createBrowserRouter([
{
path:'/login',
element:<Login />
},
{
path:'/article',
element:<Article />
},
])
export default router
应用入口文件index.js渲染RouterProvider
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import {RouterProvider} from 'react-router-dom'
//导入路由router
import router from './router'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
{/* 路由绑定 */}
<RouterProvider router={router}></RouterProvider>
</React.StrictMode>
);
路由导航跳转
路由系统中的多个路由之间需要进行路由跳转，并且在跳转的同时有可能需要传递参数通信
声明式导航
通过在模版中通过’‘’'组件描述出要跳转到哪里去，常用在点击菜单的跳转操作
import { Link } from 'react-router-dom'
const Login = () =>{
return (
<div>
我是登录页
<Link to="/article">跳转到文章页</Link>
</div>
)
}
export default Login
编程式导航
指通过useNavigate钩子得到导航方法，然后通过调用方法以命令式的形式进行路由跳转，比如想在登录请求完毕之后跳转就可以选择这种方式。
import { useNavigate } from "react-router-dom"
const Login = () =>{
const navigate = useNavigate()
return (
<div>
我是登录页
<button onClick={() => navigate('/article')}>跳转到文档</button>
</div>
)
}
export default Login
路由导航传参
searchParams传参
login文件夹下的index.js
import { useNavigate } from "react-router-dom"
import { Link } from 'react-router-dom'
const Login = () =>{
const navigate = useNavigate()
return (
<div>
我是登录页
<button onClick={() => navigate('/article?id=1001&name=Jack')}>serachparams传参跳转到文章页面</button>
</div>
)
}
export default Login
article文件夹下的index.js(接收参数)
import { useSearchParams } from "react-router-dom"
const Article = () =>{
const [params] = useSearchParams() //接收参数
const id = params.get('id')
const name = params.get('name')
return <div>我是文章页{id}-{name}</div>
}
export default Article
params传参
login文件夹下的index.js
import { useNavigate } from "react-router-dom"
import { Link } from 'react-router-dom'
const Login = () =>{
const navigate = useNavigate()
return (
<div>
我是登录页
<Link to="/article">跳转到文章页</Link>
<button onClick={() => navigate('/article/1001/jack')}>Params传参跳转到文章页面</button>
</div>
)
}
export default Login
修改路由router文件夹下的index.js
{
path:'/article/:id/:name', //在对应的router位置拼接参数占位符
element:<Article />
}
article文件夹下的index.js(接收参数)
import { useParams } from "react-router-dom"
const Article = () =>{
const params = useParams()
const id = params.id
const name = params.name
return <div>我是文章页{id}-{name}</div>
}
export default Article
嵌套路由
在一级路由中又内嵌了其他路由，这种关系就叫做嵌套路由，嵌套至一级路由内的路由为二级路由
- 使用children属性配置路由嵌套关系
- 使用组件配置二级路由渲染位置
router文件夹下的index.js
import Layout from "../page/Layout";
import Login from "../page/Login";
import Article from "../page/Article";
import About from "../page/About";
import Board from "../page/Board";
import { createBrowserRouter } from "react-router-dom";
//配置
const router = createBrowserRouter([
{
path:'/', //一级路由
element:<Layout />,
children: [ //二级路由
{
path:'board',
element:<Board />
},
{
path:'about',
element:<About />
}
]
},
{
path:'/login',
element:<Login />
},
{
path:'/article/:id',
element:<Article />
},
])
export default router
Layout文件夹下的index.js
import { Link, Outlet } from "react-router-dom"
const Layout = ()=>{
return (
<div>
我是一级路由layout组件
<Link to="/board">面板</Link>
<Link to="/about">关于</Link>
{/* 配置二级路由出口 */}
<Outlet />
</div>
)
}
export default Layout
默认二级路由配置
当访问的一级路由时，默认的二级路由组件可以得到渲染，只需要在二级路由的位置去掉path，设置index属性为true
{
path:'/',
element:<Layout />,
children: [
{
path:'board',
element:<Board />
},
{
index: true,
element:<About />
}
]
},
404路由配置
当浏览器找不到对应的path，为了用户体验，可以使用404兜底组件进行渲染
- 准备一个NotFound组件
- 在路由表数组的末尾，以*号作为路由path配置路由
const NotFound = () =>{
return <div>页面跑到月球了 </div>
}
export default NotFound
{
path:'*',
element: <NotFound />
}
两种路由模式
history 模式 和 hash模式
ReactRouter分别由createBrowerRouter和createHashRouter函数负责创建
| 路由模式 | URL表现 | 底层原理 | 是否需要后端支持 |
|---|---|---|---|
| history | url/login | history对象+pushState事件 | 需要 |
| hash | url/#/login | 监听hashChange事件 | 不需要 |
import { createBrowserRouter ,createHashRouter} from "react-router-dom";
