参考文档：ReactRouter官网

前边的文章 BrowserRouter组件式路由 提供了组件式路由的方式，在react-router@6.4.0及以上版本，提供了 createBrowserRouter 函数式路由创建方式。

一、创建路由

1. 新建router.js文件，使用createBrowserRouter创建路由

// 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信息

// 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 组件

// views/Layout/layout.jsx
export default function Layout() {return (<div>Layout</div>)
}

// views/About/about.jsx
function About() {return (<div>关于</div>)
}export default About;

4. 效果

二、嵌套二级路由

1. 修改router.js文件，在 Layout下嵌套二级菜单

// 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> 设置二级路由出口

// views/Layout/layout.jsx
import { Outlet } from "react-router-dom";export default function Layout() {return (<div>Layout{/* 二级路由出口*/}<Outlet /></div>)
}

3. 新增Login、 Info两个二级路由文件

// 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;

// views/Info/info.jsxfunction Info() {return (<div>关于: 信息</div>)
}export default Info;

4. 效果

三、 路由模式：History 和 Hash 两种