React:Router-2. createBrowserRouter函数式

参考文档:ReactRouter官网

前边的文章 BrowserRouter组件式路由 提供了组件式路由的方式,在[email protected]及以上版本,提供了 createBrowserRouter 函数式路由创建方式。

一、创建路由

1. 新建router.js文件,使用createBrowserRouter创建路由
js 复制代码
// router.js
import {createBrowserRouter} from 'react-router-dom';
import Layout from './views/Layout/layout.js';
import About from './views/About/about.js';

const router = createBrowserRouter([
	{
		path: '/',
		component: <Layout />
	},
	{
		path: '/about',
		component: <About />
	},
])

export default router;
2. index.js中 使用RouterProvider 绑定router信息
js 复制代码
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {RouterProvider} from 'react-router-dom';
import router from './router';

ReactDOM.render(
	<React.StrictMode>
		{/* 关键代码:绑定router信息 */}
		<RouterProvider router={router} />
	</React.StrictMode>,
	document.getElementById('app')
)
3. Layout 和 About 组件
js 复制代码
// views/Layout/layout.jsx
export default function Layout() {
    return (
        <div>
            Layout
        </div>
    )
}
js 复制代码
// views/About/about.jsx
function About() {

    return (
        <div>关于</div>
    )
}

export default About;
4. 效果


二、嵌套二级路由

1. 修改router.js文件,在 Layout下嵌套二级菜单
js 复制代码
// router.js
...
const router = createBrowserRouter([
	{
		path: '/',
		component: <Layout />,
		{/* children 设置二级路由 */}
		children: [
            {
                path: '/login',
                element: <Login />
            },
            {
                path: '/info',
                element: <Info/>
            },
        ]
	},
	...
])

export default router;
2. 修改layout.jsx,使用<Outlet> 设置二级路由出口
js 复制代码
// views/Layout/layout.jsx
import { Outlet } from "react-router-dom";

export default function Layout() {
    return (
        <div>
            Layout
            {/* 二级路由出口*/}
            <Outlet />
        </div>
    )
}
3. 新增LoginInfo两个二级路由文件
js 复制代码
// views/Login/login.jsx
import {useSearchParams} from 'react-router-dom';

function Login() {

    // 使用useSearchParams 获取search参数
    const [params] = useSearchParams();
    const id = params.get("id");
    const name = params.get("name");


    return (
        <div>
            Login: 参数为ID:{id}; name: {name}
        </div>
    )
}

export default Login;
js 复制代码
// views/Info/info.jsx


function Info() {

    return (
        <div>关于: 信息</div>
    )
}

export default Info;
4. 效果


三、 路由模式:HistoryHash 两种

相关推荐
Jasmin Tin Wei26 分钟前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码33 分钟前
Spring Task 定时任务
java·前端·spring
猿榜34 分钟前
js逆向-喜某拉雅Xm-Sign参数解密
javascript
转转技术团队35 分钟前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Mintopia44 分钟前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js
Mintopia1 小时前
Three.js深度解析:InstancedBufferGeometry实现动态星空特效 ——高效渲染十万粒子的底层奥秘
前端·javascript·three.js
北凉温华1 小时前
强大的 Vue 标签输入组件:基于 Element Plus 的 ElTagInput 详解
前端
随笔记1 小时前
Flex布局下,label标签设置宽度依旧对不齐,完美解决(flex-shrink属性)
javascript·css·vue.js
fightingles1 小时前
使用useOptimistic优雅实现状态预更新
react.js
原生高钙1 小时前
LLM大模型对话框实践:大文件的分片上传
前端