根据以前写vue面包屑写的。 import { useLocation, matchRoutes, } from "react-router-dom"; const location = useLocation(); import router from './router' useEffect(() => { // router全部路由 const matched = matchRoutes(router, location.pathname); const n = matched.length; let breadcrumb = []...
import { useState, useEffect } from 'react'; import { HomeOutlined, LinkOutlined } from '@ant-design/icons'; import { Breadcrumb, Layout, Menu, theme, Image, Row, Col } from 'antd'; import { NavLink, Outlet, useLocation } from "react-router-dom"; const { Header, Content, Footer } ...
'./index.scss' import {BrowserRouter} from "react-router-dom"; import {Provider} from "react-redux"; import store from "@/store"; import { ConfigProvider } from 'antd'; import zh_CN from 'antd/locale/zh_CN'; import '@/apis/mock.ts' import Routes from "@/router"; ReactDOM.create...
首先,安装React Router和Ant Design的依赖库: ``` npm install react-router-dom antd ``` 然后,创建一个带有路由和面包屑导航的页面组件。在这个组件中,我们可以通过React Router的useParams钩子来获取路由参数,并使用Ant Design的BreadCrumb组件来显示面包屑导航。
`import React from 'react'; import { Breadcrumb, Col, Row } from 'antd'; import { NavLink, useLocation } from 'react-router-dom'; const capitalizeChar = (str) => { return str.charAt(0).toUpperCase() + str.slice(1); }; /** ...
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom"; import { Breadcrumb } from "antd"; ``` 2.创建面包屑导航组件 在项目中创建一个名为 BreadcrumbNav 的组件,并引入 Ant Design 的 Breadcrumb 组件: ```javascript const BreadcrumbNav = () => { return ( <Router...
同时,结合react-router库,可以实现根据当前路由动态生成面包屑导航的功能。 示例代码 以下是一个示例代码,展示了如何在antd面包屑导航中传递路由参数: jsx import React from 'react'; import { Breadcrumb, BreadcrumbItem } from 'antd'; import { Link, useLocation } from 'react-router-dom'; // 定义路由...
import React from 'react'; import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons'; import { BrowserRouter as Router, Route, Link ,Redirect} from "react-router-dom"; import { Layout, Menu, Breadcrumb, Icon } from 'antd'; import MenuConfig from './menu' const...
npx create-react-app my-react-admin 2、安装需要的依赖 npm i antd -S 3、创建项目基本结构 my-react-admin public src api banner.js nav.js pro.js user.js components // 公共组件 layout // 布局结构 main // 主界面结构 Breadcrumb.jsx ...
import React, {Component} from 'react'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom' import FileSystem from './file_system/file_system'; import OverView from '../component/Overview/OverView'; import {Breadcrumb, Layout, Menu, Icon} from 'antd'; const {Content...