react-router-dom使用

安装

pnpm i react-router-dom

导入

1. 选择一种路由模式

   1. BrowserRouter 调用H5的history的路由跳转模式
   2. HashRouter 哈希模式的路由跳转模式
   3. ...

2. 链接路由. 使用Link 作为一个链接, 使用 to属性指向一个地址, 例如

   import {Link} from 'react-router-dom';
   
   <Link to="/">Home</Link>

3. 展示路由. 使用Routes 元素包裹Route元素, Route元素使用path属性指向Link元素的to属性的地址, 这里可以写逻辑. 然后使用element指向要渲染的路由组件

import {Home} from './Home';

<Routes>
	<Route path="/" element={<Home/>}></Route>
</Routes>