react 路由

引入方式

yarn add react-router-dom
import { BrowserRouter ,Route,Routes,NavLink} from 'react-router-dom';

<BrowserRouter>
<Routes>
<NavLink to='/'>
<Route path='/' element={component}>
</Routes>
</BrowserRouter>

路由传参

// 定义
<Route path='/:id'/>

// 使用路由参数
import { useParams} from 'react-router-dom';
useParams().id;

json形式定义路由

import {Fragment} from 'react
import { useParams} from 'react-router-dom';

function RouterView(){
  const routes=useRoutes([
    {path:'/',element:<Home></Home>},
    {path:'/user',element:<User></User>},
  ])
  return <Fragment>{routes}</Fragment>
}

react-router-dom 内置

BrowserRouter 浏览器路由 Route 单个 Routes 路由容器 NavLink 导航 useRoutes 创建路由

Navigate 跳转 useNavigate 编程跳转 useLocation 获取地址栏信息 useParams 获取路由地址变量参数 Outlet 子路由容器 useSearchParams 获取查询参数 useHistory 前进后退