4.react-router-dom

1.BrowserRouter
作用：用于包裹整个应用

import {BrowserRouter} from 'react-router-dom'
import React from 'react'
import ReactDOM from 'react-dom/client';
const App=()=>{
	return (
		<BrowserRouter>
			<App/>
		</BrowserRouter>
	)
}

const root= ReactDOM.createRoot(document.getELementId('root') as HTMLElement)
root.render(
	<App/>
)

2.Routes与Route
1)Routes必须包裹Route
2)Route的caseSensitive属性可以指定是否区分大小写（默认为false）
3)Route也可以嵌套使用，且可配合useRoutes()配置路由表，但需要通过Outlet组件来渲染其子组件

<Routes>
	<Route path="/" element={Index}></Route>
	<Route path="/home" element={Home}></Route>
	<Route path="like" element={Index}></Route>
	<Route path="set" element={Index}></Route>
	<Route path="/working" element={working}></Route>
</Routes>

3.Link路由链接
注意：需要放在BrowserRouter中

const Slider=()=>{
	return (
		<div>
			<Link to='/home'>首页</Link>
			<Link to='/working'>工作台</Link>
		</div>
	)
}

4.NavLink可以实现高亮的路由链接，判断是否匹配当前路由

const Slider=()=>{
	return (
		<div>
			<NavLink className={(isActive)=>(isActive?'link active' : 'link')} to='/home'>首页</NavLink>
			<NavLink className={(isActive)=>(isActive?'link active' : 'link')} to='/working'>工作台</NavLink>
		</div>
	)
}
//默认情况下，当Home的子组件匹配成功后，Home的导航也会亮
//当NavLink添加end属性后，若Home的子组件匹配成功，则Home的导航没有高亮效果
//<NavLink end className={(isActive)=>(isActive?'link active' : 'link')} to='/home'>首页</NavLink>

//to 指定跳转到的路由地址
//state 对象，隐式传递数据
//replace boolean 是否可以回退
//end它是5版本中的exact 严格匹配 ==> / 就是最后，后面没有匹配内容  boolean

5.Navigate只要Navigate组件被渲染，就会修改路径，切换视图

function Test(){
	const [show,setShow] = useState:boolean(false)
	return (
		<div>
			{show?<Navigate to="/working"/>:'here'}
			<button onclick={setShow(!show)}>点击切换组件</button>
		</div>
	)
}

6.Outlet当Route产生嵌套时，渲染其对应的后续子路由

7.Hooks

7.1 useNavigate()跳转路由

const navigate=useNavigate();
navigate(path,state:{路由参数})//跳到指定路由并传参
navigate(1)//前进
navigate(-1)//后退

7.2 useParams()获取路由参数
路由格式：/details/:id/:title/:content

const {id, title, content} = useParams()

7.2 useSearchParams()获取并改变路由的查询字符串参数
路由格式：/details?id=001&title=参数&content=哈哈

const [search, setSearch] = useSearchParams()
//获取
let id=search.id;
//改变
setSearch('id=008&title=哈哈&content=嘻嘻')

7.3 useLocation()
作用：获取当前location信息，对应5中的路由组件的location属性
路由格式：使用state传参

const {state:{id, title, content}} = useLocation()

7.4 useMatch()
作用：用于获取paramas参数

// 读取params参数的第一种写法
  const {id, title, content} = useParams()
  // 读取params参数的第二种写法
  const a = useMatch('/home/message/detail/:id/:title/:content')
  console.log(a);

7.5 useResolvedPath()
作用：给定一个URL值，解析其中的path、search、hash值

let prams=useResolvedPath('/user?id=001&title=哈哈')