react路由

1.安装 ：

npm i react-router-dom -S

2.使用步骤

2.1 创建页面

src/views/HomeView.jsx
src/views/AboutView.jsx

2.2 配置路由

src/router/index.jsx
const router=[
    {path:"/",element:<HomeView />},
    {path:"about",element:<AboutView />},
]

2.3 创建路由

src/router/index.jsx
export default function RouterView(){
    
    const elem = useRoutes(routes);
 //路由配置
    return elem;
}

2.4     2.5 使用并切换路由

App.jsx
<HashRouter>
   <NavLink to='/'>首页</NavLink>
            <NavLink to='/about'>关于</NavLink>
            <RouterView />
</HashRouter>

3.路由组件与方法

组件

<HashRouter>哈希路由

<BrowserRouter> 浏览器路由

<NavLink> 导航链接，选中会有active 类名

<LInk>导航链接

<OutLet>子路由容器

方法

useRoutes 使用路由配置

useParams() 路由参数

useSearchParams() 获取查询参数

4.路由参数

 <NavLink to='/product/123'></NavLink>

router/index.jsx
 {path:"/product/:id",element:<ProductView />},

在ProductView.jsx
const{id} = useParams();

5.路由查询参数

  <NavLink to='/about?redirect=hello'></NavLink>

不需要配置

在About.jsx
const [searchParams]=useSearchParams()
 const redirect =searchParams.get('redirect')

6.子路由

router/index.jsx
 {path:"/admin",element:<AdminView />,
  children:[
        {path:"",element:<DashView />},
        {path:"orderlist",element:<OrderList />}
    ]},

vivew/admin/adminView.jsx
  <Link to="">概览</Link>|
       <Link to="orderlist">订单</Link>
<Outlet/>

7.404

配置在最后面
{path:"*",element:<div >404</div >}