React Bootstrap 5中为NavDropdown添加react-router-dom的Link问题

你直接给NavDropdown组件设置as={Link}和to属性是无效的——NavDropdown只是下拉菜单的容器组件，本身不负责触发路由跳转，需要把路由绑定到实际可点击的元素上，分两种场景处理：

场景1：点击下拉触发按钮跳转页面（同时展开下拉） #

将NavDropdown.Toggle设置为Link组件，代码示例：

import { Link } from 'react-router-dom';
import { NavDropdown } from 'react-bootstrap';

<NavDropdown
  id="basic-nav-dropdown"
  renderMenuOnMount={true}
>
  <NavDropdown.Toggle as={Link} to="/InStoreRestaurant">
    In store restaurant
  </NavDropdown.Toggle>
  {/* 下拉菜单项 */}
  <NavDropdown.Item>示例菜单项1</NavDropdown.Item>
</NavDropdown>

场景2：点击下拉菜单项跳转页面 #

给NavDropdown.Item绑定Link，代码示例：

import { Link } from 'react-router-dom';
import { NavDropdown } from 'react-bootstrap';

<NavDropdown
  title="In store restaurant"
  id="basic-nav-dropdown"
  renderMenuOnMount={true}
>
  <NavDropdown.Item as={Link} to="/InStoreRestaurant">
    进入到店餐厅页面
  </NavDropdown.Item>
  {/* 其他菜单项 */}
</NavDropdown>

额外注意：

• 确认已正确导入react-router-dom的Link组件
• 路由配置中存在/InStoreRestaurant对应的路由规则

内容的提问来源于stack exchange，提问作者user14918901