2.React框架之函数组件路由及参数传递React-Router（V6）
安装react-router
npm install --save react-router-dom
1.统一配置路由表生成规则
1.1index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {BrowserRouter} from "react-router-dom";
ReactDOM.render(
,
document.getElementById('root')
);
1.2 App.js-----获取路由表，根据路由表生成对应路由
import './App.css';
import React from "react";
import routes from './router/index'
import {useRoutes} from "react-router";
export default function App() {
//根据路由表生成对应的路由规则
const element=useRoutes(routes)
return (
{/* 注册路由 */}
{element}
);
}
1.3 router/index.js-----路由表
import Home from "../pages/home";
import Details from "../pages/details";
import Mine from "../pages/mine";
import {Navigate} from "react-router";
import Params from "../pages/params";
import SearchRoute from '../pages/search'
import StateRoute from "../pages/state";
import Demo from "../pages/demo";
const routes=[
{
path:'/demo',
element:2.路由参数传递
2.1传递params参数并实现跳转
传递参数
import React, {useState} from 'react';
import {Link,Outlet} from "react-router-dom";
export default function Demo(props) {
const [messages] = useState([
{id:'001',title:'消息1',content:'锄禾日当午'},
{id:'002',title:'消息2',content:'汗滴禾下土'},
{id:'003',title:'消息3',content:'谁知盘中餐'},
{id:'004',title:'消息4',content:'粒粒皆辛苦'}
])
return (
params参数
{
messages.map((item,index)=>{
return (
-
params跳转并携带参数
)
})
}
{/*Outlet：用于展示子路由*/}
{/* 指定路由组件的展示位置 */}
接收参数
import React from 'react';
import {useParams} from "react-router";
export default function Params(props) {
console.log(useParams())
const params=useParams()
return (
params路由数据展示
params：id:{params.id}---name:{params.title}
);
}
2.2 传递search参数并实现跳转
import React, {useState} from 'react';
import {Link,Outlet} from "react-router-dom";
export default function Demo(props) {
const [messages] = useState([
{id:'001',title:'消息1',content:'锄禾日当午'},
{id:'002',title:'消息2',content:'汗滴禾下土'},
{id:'003',title:'消息3',content:'谁知盘中餐'},
{id:'004',title:'消息4',content:'粒粒皆辛苦'}
])
return (
search参数
{
messages.map((item,index)=>{
return (
-
search跳转并携带参数
)
})
}
{/*Outlet：用于展示子路由*/}
{/* 指定路由组件的展示位置 */}
接收参数
import React from 'react';
import {useSearchParams} from "react-router-dom";
export default function SearchRoute(props) {
const [search,setSearch]=useSearchParams()
return (
search路由数据展示
search路由携带数据：id:{search.get('id')}---name:{search.get('title')}
);
}
2.3 传递state参数并实现跳转
import React, {useState} from 'react';
import {Link,Outlet} from "react-router-dom";
export default function Demo(props) {
const [messages] = useState([
{id:'001',title:'消息1',content:'锄禾日当午'},
{id:'002',title:'消息2',content:'汗滴禾下土'},
{id:'003',title:'消息3',content:'谁知盘中餐'},
{id:'004',title:'消息4',content:'粒粒皆辛苦'}
])
return (
state参数
{
messages.map((item,index)=>{
return (
-
state跳转并携带参数
)
})
}
{/*Outlet：用于展示子路由*/}
{/* 指定路由组件的展示位置 */}
接收参数
import React from 'react';
import {useLocation} from "react-router";
export default function StateRoute(props) {
console.log(useLocation())
const {state:{id,title}}=useLocation()
return (
state路由数据展示
state路由携带数据：id:{id}---name:{title}
);
}
3.编程式路由导航
3.1传递params参数并实现跳转
import React, {useState} from 'react';
import {Outlet, useNavigate} from "react-router-dom";
export default function Demo(props) {
const navigate = useNavigate()
const [messages] = useState([
{id:'001',title:'消息1',content:'锄禾日当午'},
{id:'002',title:'消息2',content:'汗滴禾下土'},
{id:'003',title:'消息3',content:'谁知盘中餐'},
{id:'004',title:'消息4',content:'粒粒皆辛苦'}
])
function toParams(item) {
navigate(`params/${item.id}/${item.title}/${item.content}`,{
replace:false,
})
}
return (
params参数
{
messages.map((item,index)=>{
return (
-
)
})
}
{/*Outlet：用于展示子路由*/}
{/* 指定路由组件的展示位置 */}
3.2 传递search参数并实现跳转
import React, {useState} from 'react';
import {Outlet, useNavigate} from "react-router-dom";
export default function Demo(props) {
const navigate = useNavigate()
const [messages] = useState([
{id:'001',title:'消息1',content:'锄禾日当午'},
{id:'002',title:'消息2',content:'汗滴禾下土'},
{id:'003',title:'消息3',content:'谁知盘中餐'},
{id:'004',title:'消息4',content:'粒粒皆辛苦'}
])
function toSearch(item) {
return ()=>{
navigate(`search?id=${item.id}&title=${item.title}&content=${item.content}`,{
replace:true
})
}
}
return (
search参数
{
messages.map((item,index)=>{
return (
-
)
})
}
{/*Outlet：用于展示子路由*/}
{/* 指定路由组件的展示位置 */}
3.3 传递state参数并实现跳转
import React, {useState} from 'react';
import {Outlet, useNavigate} from "react-router-dom";
export default function Demo(props) {
const navigate = useNavigate()
const [messages] = useState([
{id:'001',title:'消息1',content:'锄禾日当午'},
{id:'002',title:'消息2',content:'汗滴禾下土'},
{id:'003',title:'消息3',content:'谁知盘中餐'},
{id:'004',title:'消息4',content:'粒粒皆辛苦'}
])
function toState(item) {
navigate('state',{
replace:false,
state:{
id:item.id,
title:item.title,
content:item.content
}
})
}
return (
state参数
{
messages.map((item,index)=>{
return (
-
)
})
}
{/*Outlet：用于展示子路由*/}
{/* 指定路由组件的展示位置 */}