antd anchor根据当前浏览器搜索栏中的id自动跳到当前页面相应id位置

要实现antd anchor根据当前浏览器搜索栏中的id自动跳到当前页面相应id位置，你可以使用React Router的HashRouter组件和antd的Anchor组件相结合，再结合useEffect和useRef钩子函数来实现。具体实现步骤如下：

1. 在React Router的HashRouter组件中包裹需要跳转的页面内容，并将需要跳转的页面内容的id作为路由的哈希值。

2. 在antd的Anchor组件中使用Link组件，并设置href属性为需要跳转的页面内容的id。

3. 在antd的Anchor组件中设置Target属性为需要跳转的页面内容的id。

4. 在页面组件中使用useRef钩子函数来获取需要跳转的页面内容的DOM节点。

5. 在页面组件中使用useEffect钩子函数来监听浏览器搜索栏中的id变化，并根据变化自动跳转到相应的位置。

示例代码如下：

import { Anchor } from 'antd';
import { HashRouter, Route, useLocation } from 'react-router-dom';
import { useEffect, useRef } from 'react';

const { Link } = Anchor;

function App() {
  const location = useLocation();
  const sectionRef = useRef({});

  useEffect(() => {
    const id = location.hash.slice(1);
    const section = sectionRef.current[id];
    if (section) {
      section.scrollIntoView();
    }
  }, [location.hash]);

  return (
    <HashRouter>
      <Anchor targetOffset="64">
        <Link href="#section1" title="Section 1" />
        <Link href="#section2" title="Section 2" />
        <Link href="#section3" title="Section 3" />
      </Anchor>

      <div ref={(el) => sectionRef.current['section1'] = el} id="section1">
        // Section 1 content
      </div>

      <div ref={(el) => sectionRef.current['section2'] = el} id="section2">
        // Section 2 content
      </div>

      <div ref={(el) => sectionRef.current['section3'] = el} id="section3">
        // Section 3 content
      </div>
    </HashRouter>
  );
}

在这个例子中，当用户在浏览器搜索栏中输入“/#/section2”并按下回车键时，页面就会自动滚动到id为“section2”的位置。注意，这里的Target属性设置为64，是因为Antd的导航栏默认高度为64px。