使用React Router V4和antd侧边栏进行动态title设置：告别复杂，拥抱便捷

2023-10-29 01:55:27

前言

在构建React单页应用（SPA）时，路由和导航是非常重要的元素。随着React Router V4的发布，它带来了更强大、更灵活的路由能力，为开发人员提供了更多的选择和控制。antd作为一款流行的UI库，也提供了丰富的组件，包括侧边栏组件，这使得在React应用中创建漂亮的导航菜单变得非常容易。

然而，在使用React Router V4和antd侧边栏时，一个常见的问题是动态title设置。在SPA应用中，当用户在不同页面之间导航时，title应该随之改变，以反映当前页面的内容。这对于SEO优化和用户体验都非常重要。

问题所在

在React Router V3中，可以使用`

);
};


通过这种方式，我们可以在组件中动态地设置title。但是，这种方法还存在一个问题。当我们在不同的页面之间导航时，需要在每个页面都添加`<Helmet>`组件，这非常麻烦。

## antd侧边栏

antd侧边栏是一个非常好用的组件，它可以帮助我们创建漂亮的导航菜单。然而，默认情况下，antd侧边栏并不能动态地设置title。为了解决这个问题，我们需要对antd侧边栏进行一些改造。

```javascript
import { Menu, Layout } from 'antd';
import { Link, useLocation } from 'react-router-dom';

const Sider = () => {
  const location = useLocation();

  return (
    <Layout.Sider>
      <Menu
        theme="dark"
        mode="inline"
        defaultSelectedKeys={[location.pathname]}
        onSelect={({ key }) => {
          window.document.title = key;
        }}
      >
        <Menu.Item key="/">
          <Link to="/">首页</Link>
        </Menu.Item>
        <Menu.Item key="/about">
          <Link to="/about">关于我们</Link>
        </Menu.Item>
        <Menu.Item key="/contact">
          <Link to="/contact">联系我们</Link>
        </Menu.Item>
      </Menu>
    </Layout.Sider>
  );
};

export default Sider;