参考文档:ReactRouter官网
前边的文章 BrowserRouter组件式路由 提供了组件式路由的方式,在react-router@6.4.0
及以上版本,提供了 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. 新增Login
、 Info
两个二级路由文件
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. 效果