7.react路由编程式路由导航

• 导入一个 useNavigate钩子函数
• 执行 useNavigate 函数得到 跳转函数
• 在事件中执行跳转函数完成路由跳转

// App.js
import React, { useState } from 'react';
import {Outlet,useNavigate} from 'react-router-dom'

function App() {
	
	const navigate = useNavigate()
	
	function showDetails(i){
		navigate('details',{
			replace:false,
			state:{
				id:i.id,
				title:i.title,
				cont:i.cont
			}
		})
	}
	
	const [messages] = useState([
		{id:'001',title:'消息1',cont:'锄禾日当午'},
		{id:'002',title:'消息2',cont:'汗滴禾下土'},
		{id:'003',title:'消息3',cont:'谁知盘中餐'},
		{id:'004',title:'消息4',cont:'粒粒皆辛苦'}
	]);
	return (
		<div>
			<ul>
				{
					messages.map((i)=>{
						return(
							<li onClick={()=>showDetails(i)} key={i.id}>
								{i.title}
							</li>
						)
					})
				}
			</ul>
			<hr/>
			<Outlet/>
		</div >
	);
}

export default App;