添加配置react组件路由具体步骤参考

文章目录

发现宝藏

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。【宝藏入口】。

需要在Menu组件的items数组中添加一个新的对象,该对象代表"学科素材"这个一级菜单项,并且包含一个children属性,该属性是一个数组,包含二级菜单项"学科管理"。以下是修改后的代码段:

jsx 复制代码
<Menu
    onClick={navigateTo}
    theme="dark"
    mode="inline"
    defaultSelectedKeys={['/']}
    items={[
		  ...
        {
            key: '/textbook', icon: <BookOutlined />, label: '教材',
        },
        {
            key: '/subject-material',
            icon: <BookOutlined />, // 可以选择合适的图标
            label: '学科素材',
            children: [ // 二级菜单项
                {
                    key: '/subject-management',
                    label: '学科管理'
                }
            ]
        }
    ]}
>
</Menu>

在这段代码中,key属性是必须的,用于标识每个菜单项。可能还需要为"学科素材"选择一个合适的图标,这里使用了<BookOutlined />,但可以根据需要更换。children属性定义了"学科素材"下的二级菜单项,这里只有一个"学科管理"项,但可以按照同样的格式添加更多二级菜单项。

接下来是使用 TypeScript (.tsx) 语法创建"学科管理"组件和配置路由的示例代码。

首先,创建SubjectManagement.tsx组件:

tsx 复制代码
// SubjectManagement.tsx
import React from 'react';
const SubjectManagement: React.FC = () => {
    return (
        <div>
            <h1>学科管理</h1>
            {/* 这里可以添加学科管理的相关内容 */}
        </div>
    );
};
export default SubjectManagement;

然后,在你的路由配置文件中(假设你使用的是react-router-domRoutesRoute组件),添加以下代码来配置"学科管理"页面的路由:

tsx 复制代码
// App.tsx 或 RouterConfig.tsx
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import App from './App'; // 你的主应用组件
import SubjectManagement from './SubjectManagement'; // 刚刚创建的学科管理组件
const RouterConfig: React.FC = () => {
    return (
        <Router>
            <Routes>
                {/* ...其他路由配置 */}
                <Route path="/subject-management" element={<SubjectManagement />} />
                {/* ...其他路由配置 */}
            </Routes>
        </Router>
    );
};
export default RouterConfig;

现在,在你的主应用组件App.tsx中,确保你已经正确配置了navigateTo函数来处理导航:

tsx 复制代码
import { useNavigate } from 'react-router-dom';
// ...其他导入
function App() {
    const navigate = useNavigate();
    // ...其他状态和逻辑
    const navigateTo = (e: { key: string }) => {
        if (e.key === '/batchUpload') {
            setCollapsed(true);
        }
        navigate(e.key);
    };
    // ...其他组件代码
    return (
        // ...你的组件结构
    );
}
export default App;

最后,确保你的入口文件(如index.tsx)使用RouterConfig组件作为顶层组件,或者直接在App.tsx中配置路由:

tsx 复制代码
// index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import RouterConfig from './RouterConfig'; // 如果你将路由配置放在单独的文件中
ReactDOM.render(
    <React.StrictMode>
        <RouterConfig />
    </React.StrictMode>,
    document.getElementById('root')
);

这样,你就完成了"学科管理"页面的创建和路由配置,使用TypeScript语法。当用户点击"学科素材"下的"学科管理"菜单项时,将会被导航到/subject-management路径,并看到"学科管理"页面。

相关推荐
果粒chenl13 分钟前
React学习(四) --- Redux
javascript·学习·react.js
IT_陈寒22 分钟前
React 性能优化:5个实战技巧让首屏加载提升50%,开发者亲测有效!
前端·人工智能·后端
rising start39 分钟前
前端基础一、HTML5
前端·html·html5
鬼谷中妖1 小时前
JavaScript 循环与对象:深入理解 for、for...in、for...of、不可枚举属性与可迭代对象
前端
大厂码农老A1 小时前
你打的日志,正在拖垮你的系统:从P4小白到P7专家都是怎么打日志的?
java·前端·后端
im_AMBER1 小时前
CSS 01【基础语法学习】
前端·css·笔记·学习
DokiDoki之父1 小时前
前端速通—CSS篇
前端·css
pixle01 小时前
Web大屏适配终极方案:vw/vh + flex + clamp() 完美组合
前端·大屏适配·vw/vh·clamp·终极方案·web大屏
ssf19871 小时前
前后端分离项目前端页面开发远程调试代理解决跨域问题方法
前端
@PHARAOH1 小时前
WHAT - 前端性能指标(加载性能指标)
前端