基于浏览器的React项目中的路由导航模块—— react-router-dom

GitHub仓库：https://github.com/remix-run/react-router/blob/main/docs/getting-started/tutorial.md

  英文官网：https://reactrouter.com/

  使用方法：

  ①在当前项目中下载必需的模块文件

npm  i   react-router-dom

  ②使用方法： 老大爷(路由器)    >  大脑(路由词典/列表)  >  线路(路由*N)

BrowserRouter  >   Routes    >  Route * N

<BrowserRouter>

<Routes>

<Route  path="/地址"  element={<元素名/> }/>

....

<Route  path="/地址"  element={<元素名/> }/>

<Route  path="*"  element={<NotFound /> }/>

</Routes>

</BrowserRouter>

  ③路由跳转的两种方式：

模板法： <Link to="/地址">文字</Link>

脚本法： let nav = useNavigate();   nav('/地址')

  ④如何获取当前页面的路由地址

import  {useLocation}  from  'react-router-dom'

let {pathname} = useLocation( )

⑤页面跳转传参

//page1

<Link to="/page2?k1=v1&k2=v2&....">

//page2

import  {useSearchParams}  from  'react-router-dom'    

//查询字符串：QueryString / SearchParams

let [params]  = useSearchParams()