react 之路由

1 概念

从版本的React-Router5.x开始，路由彻底改变了，和以后的版本完全不兼容。所以出去开发时注意版本。

对当页面应用模式提供多页面效果

Link和useNavigate实现组件切换时，实计上伴随着组件的销毁与创建，所以建议只有整体页面切换时才使用路由，而局部切换时使用最原始的隐藏显示为佳，这样可以保让组件中通过ajax得到的数据一直存在。同样的道理，子路由的使用也需要特别小心

2 环境

(1)下载第三方模块

(a)ts开发情况下， 下载模块"react-router-dom"和 “@types/react-router-dom”

npm i --save react-router-dom @types/react-router-dom

(b)js开发情况下, 只需下载模块"react-router-dom"

(2)引入

import {  
	  BrowserRouter as Router, //BrowserRouter太长，常常使用别名Router
	  Route, 
      Routes,
      Link,
      useNavigate,
      useParams,
      useLocation,
      Navigate
} from 'react-router-dom';

BrowserRouter太长，常常使用别名Router

3 创建路由

<BrowserRouter>
				<Routes>
					<Route path='/main' element={<Main />} />
					<Route path='/one' element={<One />} />
					<Route path='/two' element={<Two />} />
				</Routes>
</BrowserRouter>
		 

<BrowserRouter>
  		  {/*Nav这个自定义组件与路由出来的界面同时显示， 页面跳转-Link和useNavigate可以在该组件中控制*/}
  			<Nav />
				<Routes>
					<Route path='/main' element={<Main />} />
					<Route path='/one' element={<One />} />
					<Route path='/two' element={<Two />} />
				</Routes>
</BrowserRouter>

4 页面跳转-Link和useNavigate

Link和useNavigate 必须位于BrowserRouter标签内部

Link相当于超连接

useNavigate是hook

import {Link, useNavigate} from 'react-router-dom';

Line标签
<Link to={
  {pathname:'/one'}}>one</Link>

或ts代码-useNavigate
let navigate = useNavigate();
function toTwo() {
		navigate({pathname:'/one'});
}