React Router Dom v6 显示索引和其他子路由处于活动状态

作者:编程家 分类: reactjs 时间:2025-08-11

React Router Dom是React的一种常用的路由库，用于实现页面之间的导航和路由跳转。在React Router Dom v6中，我们可以很方便地显示索引和其他子路由处于活动状态。

显示索引

在React Router Dom v6中，显示索引非常简单。我们可以使用组件来创建链接，并将其放置在需要显示的位置。在组件中，我们可以指定要跳转的路径以及要显示的内容。

jsx
import { Link } from 'react-router-dom';
function App() {
  return (
    
      
我的网站
      
    
  );
}
export default App;

在上面的代码中，我们创建了一个简单的导航栏，其中包含三个链接：首页、关于我们和联系我们。当用户点击这些链接时，页面将根据指定的路径进行跳转。

其他子路由处于活动状态

在React Router Dom v6中，我们可以很容易地确定当前活动的子路由。通过使用组件的`isActive`属性，我们可以判断当前路由是否与指定的路径匹配，并根据结果进行相应的处理。

jsx
import { Route, Link, useLocation } from 'react-router-dom';
function NavigationItem({ to, label }) {
  const location = useLocation();
  const isActive = location.pathname === to;
  return (
    
  •       
            {label}
          
        
    •   );
    }
    function App() {
      return (
        
          
    我的网站
          
          
          
          
        
      );
    }
    export default App;

    在上面的代码中，我们创建了一个`NavigationItem`组件，它接受`to`和`label`作为属性。通过使用`useLocation`钩子来获取当前的路径，并通过比较路径是否匹配来确定是否将链接标记为活动状态。

    通过使用React Router Dom v6，我们可以很方便地显示索引和确定其他子路由是否处于活动状态。这使得我们能够实现更好的导航和用户体验。希望本文能帮助你更好地理解React Router Dom v6的使用。


    本站代码收录于网上如果侵犯了您的权益请联系删除。 星云探索 备案:鲁ICP备15006040号-14