앤트디자인 버전은 5.1.1이고 라우팅 버전은 v6인데,
새 버전의 내비게이션 메뉴 라우팅 설정이 이전 버전과 달라서 처음에는 어떻게 쓰는지도 몰랐습니다.
실현 효과:
암호:
import React, {
useState } from 'react';
import {
DesktopOutlined,
EditFilled,
PieChartOutlined,
} from '@ant-design/icons';
import {
Breadcrumb, Layout, Menu, theme } from 'antd';
import {
useNavigate, Routes, Route } from 'react-router-dom'
import "./App.css"
import Home from './pages/home';
import Charts from './pages/charts'
const {
Header, Content, Footer, Sider } = Layout;
function getItem (label, key, icon, children) {
return {
key,
icon,
children,
label,
};
}
const items = [
getItem('记账', '/home', <PieChartOutlined />),
getItem('统计', '/charts', <DesktopOutlined />),
];
const App = () => {
const [collapsed, setCollapsed] = useState(false);
const navigate = useNavigate()
const {
token: {
colorBgContainer },
} = theme.useToken();
const onClick = (e) => {
navigate(e.key, {
replace: true })
}
return (
<Layout
style={
{
minHeight: '100vh',
}}
>
<Sider collapsible collapsed={
collapsed} onCollapse={
(value) => setCollapsed(value)}>
<div className='title' >
<EditFilled />
<span style={
{
marginLeft: 15 }}>记账管家</span>
</div>
<Menu theme="dark" defaultSelectedKeys={
['1']} mode="inline" items={
items} onClick={
onClick} />
</Sider>
<Layout className="site-layout">
<Header
style={
{
padding: 0,
paddingLeft: 30,
background: colorBgContainer,
}}
>123</Header>
<Content
style={
{
margin: '0 16px',
}}
>
<Breadcrumb
style={
{
margin: '16px 0',
}}
>
{
/* <Breadcrumb.Item>User</Breadcrumb.Item>
<Breadcrumb.Item>Bill</Breadcrumb.Item> */}
</Breadcrumb>
<div
style={
{
padding: 24,
minHeight: '75vh',
background: colorBgContainer,
}}
>
<Routes>
<Route exact path="/home" element={
<Home />} />
<Route exact path="/charts" element={
<Charts />} />
</Routes>
</div>
</Content>
<Footer
style={
{
textAlign: 'center',
}}
>
Ant Design ©2018 Created by Ant UED
</Footer>
</Layout>
</Layout>
);
};
export default App;
설명하다:
먼저 내비게이션 메뉴의 메뉴에 클릭 이벤트를 추가합니다.
항목을 수정하고 클릭 이벤트를 설정하여 클릭 후 키 값을 얻습니다. (키 값은 경로가 이동하는 페이지입니다.)
프린트해서 구경해보세요
획득한 키 값은 경로의 useNavigate를 사용하여 페이지로 이동하는 데 사용할 수 있습니다.
수입 경로
import {
useNavigate, Routes, Route } from 'react-router-dom'
클릭 이벤트 점프 설정
마지막으로 페이지 라우팅 종료를 설정합니다(여기서 필요에 따라 해당 페이지 라우팅 종료를 설정합니다).
주의점:
다음과 같은 오류가 발생하면 컴포넌트 내에서 useNavigate를 사용해야 하며, 해당 페이지 컴포넌트를 <Router> 로 래핑
해야 합니다. 내 네비게이션 메뉴는 App.js로 작성되었으므로 내 App 컴포넌트는 index로 래핑됩니다. .js에서는
라우팅 설정이 완료됩니다. 페이지용.