React新本路由的写法,各位小伙伴别记错了哦

随着react的不断改版,之前很多的语法逐渐淘汰,react的路由也是一样,废话不多说直接看代码。

安装 npm install react-router-dom --save
# 引入
import { BrowserRouter, Link, Route,Routes } from 'react-router-dom';
# 使用
<BrowserRouter>
    <Routes>                                                     # 多路由器需要Routes包裹
    <Route path='/' element={<Home />} />                        # 新版必须有主页 path='/'
    <Route path='/list' element={<NewList />} />                 # 用element引入组件
    <Route path='/button' element={<NewButton />} />
    </Routes>
</BrowserRouter>

               
 $ 可以携带参数<Link to='/list?a=123'>
 $ 接收一方在this.props中寻找
<Link to='/list'>                                                # Link跳转 用to给链接地址                            
    <Button type="primary">按钮</Button>
</Link>

好心人留个赞呗

猜你喜欢

转载自blog.csdn.net/qq_63438888/article/details/126587233