Skip to main content

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>