react-router-dom文档

react路由

概念：监听地址栏变化，不刷新页面，动态切换div模拟切换页面

安装： npm  i react-router-dom -S

使用步骤

1， 创建页面
src/views/HomeView.jsx(home页面)
src/views/AboutView.jsx（about页面）

2，配置路由
 

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

3，创建路由

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

4，使用并切换路由

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

路由组件与方法

组件

<HashRouter> 哈希路由

<BrowserRouter> 浏览器路由

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

<Link>导航链接

<OutLet>子路由容器

方法

useRoutes使用路由配置

useParams() 路由参数

useSearchParams() 获取查询参数

路由参数

<NavLink to="/produce/123"

router/index.jsx
{path:"/produce/:id",element:<ProduceView/>}

在ProductView.jsx

const {id} = useParams();

路由参数

<NavLink to="/about?redirect=hello"

不需要配置

在About.jsx

const [searchParams] = useSearchParams();
const redirect = searchParams.get("reidrect")

子路由

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

404路由

配置到最后面

{path:"*",element:<div>404</div>}