React18路由配置【示例Antd组件库】

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { Layout } from 'antd';
import Header from './Header';
import Footer from './Footer';
import Home from './Home';
import About from './About';
import Contact from './Contact';
 
const { Content } = Layout;
 
function AppRouter() {
  return (
    <Router>
      <Layout className="App">
        <Header />
        <Content style={{ padding: '0 50px' }}>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/contact" element={<Contact />} />
          </Routes>
        </Content>
        <Footer />
      </Layout>
    </Router>
  );
}
 
export default AppRouter;

这个代码示例展示了如何使用React Router v6在一个使用Ant Design组件库的React应用中配置路由。它使用<BrowserRouter>作为顶级路由组件，并通过<Routes>和<Route>组件来配置路由规则，其中element属性用于指定当路由匹配时要渲染的组件。这个例子简洁明了，并且清晰地展示了如何将路由和UI组件组织在一起。