从0开始学react,用Ant-design Menu组件实现左侧导航菜单

最近自己用antd的Menu组件实现了一个导航菜单，下面就分享给大家实现方法

相应版本

• antd: 4.17
• react-router 5.2

实现过程

1. 首先新建layout文件夹，先分好页面分区。

home是主页面，包含sideMenu和main组件，sideMenu是左侧导航组件，main是右侧内容区

home组件：

function Home() {
  const { Content, Sider } = Layout;
  // 定义selectedKeys，来控制菜单选中状态和切换页面
  const [selectedKeys, setSelectedKeys] = useState([]);
  // useLocation react-router自带hook，能获取到当前路由信息
  const location = useLocation();

// 每次切换路由，获取当前最新的pathname,并赋给menu组件
  useEffect(() => {
  // location.pathname对应路由数据中的path属性
    setSelectedKeys([location.pathname]);
  }, [location]);

  return (
    <>
        <Layout style={{ minHeight: '100vh' }}>
          <Sider
            style={{
              overflow: 'auto',
              height: '100vh',
              position: 'fixed',
              left: 0,
            }}
          >
            <SideMenu selectedKeys={selectedKeys} />
          </Sider>
          <Layout style={{ marginLeft: 200, background: '#F6F8FB' }}>
            <Content style={{ padding: '10px', overflow: 'initial' }}>
              <Main />
            </Content>
          </Layout>
        </Layout>
    </>
  );
}
export default withRouter(Home);

sideMenu组件：

• Menu组件是靠selectedKeys这个属性来实现点击菜单选中和切换路由跳转页面

function SideMenu(props) {
  return (
    <Menu theme="dark" selectedKeys={props.selectedKeys}>
      {RouteShowList.map((route) => (
        <Menu.Item key={route.path}>
          <NavLink to={route.path}>{route.name}</NavLink>
        </Menu.Item>
      ))}
    </Menu>
  );
}
export default withRouter(SideMenu);

main组件：

export function Main() {
  return (
    <Switch>
    // RouteList即前端定义的路由数组
      {RouteList.map((route) => {
        return (
          <Route exact path={route.path} key={route.path}>
            {route.component}
          </Route>
        );
      })}
    </Switch>
  );
}

App.tsx：

import Home   from './layout/home'


function App() {
  return (
    <Home/>
  );
}

export default App;

index.tsx:

• 一定要用BrowserRouter把app.tsx组件包起来，不然里面的withRouter不生效

import { BrowserRouter as Router} from 'react-router-dom';
<Router>
   <App />
</Router>

react-router-dom与vue-router对比

实现功能	vue-router	react-router-dom
初始化	需要先Vue.use(VueRouter);再实例化才能使用	可以直接使用,用BrowserRouter把app包起来即可
渲染页面	通过router-view实现页面渲染	要用switch把所有的router遍历一变

总结

个人感觉react-router要更灵活一些，实现方法要比vue-router简单。

以上仅个人学习整理，如有错误之处，还望大家指正。