通过vue学习react(五) - 路由router

react router v6 版本的路由实现

喜欢就点赞呗

安装

pnpm add react-router-dom

完整代码

# App.tsx
function App() {
  return (
    

      

        
          Home
        
        
          About
        
        
          About
        
      
      
        }>
        }>
        } />
        }>
          }>
          }>
        
      
      。
    
  );
}

Api

方法	意义
useParams	返回当前参数 根据路径读取参数
useNavigate	返回当前路由 代替原有V5中的 useHistory
useOutlet	返回根据路由生成的element
useLocation	返回当前的location 对象
useRoutes	同Routers组件一样，只不过是在js中使用
useSearchParams	用来匹配URL中?后面的搜索参数

基本路由实现

其中Home, 和About的代码就不进行展示了

}>
}>

则是定义路由

地址	组件
localhost:3000/	Home组件
localhost:3000/about	About组件

不过这些很快就能分清楚, 不过需要深入了解的是嵌套路由
下面的代码主要也是list为主

404路由

} />

当Routes中寻找不到的时候, 我们在最后一个路由中添加正则就可以指定404了

重定向

使用导航组件重定向

我们可以通过使用 React Router 的 Navigate 组件来执行声明性重定向。在下面的示例中，每当用户导航到"关于"页时，导航组件都将以声明方式执行重定向：

const About = () => {
  const shouldRedirect = true;

  return (
    <>
      
About
      {shouldRedirect && }
    
  );
};

如果我们想在路由级别对此进行管理，我们也可以使用以下替代解决方案：

# App.tsx

    ) : (
      
    )
  }
/>

使用重定向导航钩子

const About = () => {
  const shouldRedirect = true;

  const navigate = useNavigate();

  React.useEffect(() => {
    if (shouldRedirect) {
      navigate('/home');
    }
  });

  return (
    <>
      
About
    
  );
};

每当组件呈现时，React 的 useEffect Hook 都会运行，并将以编程方式执行重定向。

嵌套路由(list)的实现

}>
  }>
  }>

上方代码主要组成是这样的,

当我们访问http://localhost:3000/list

当我们访问http://localhost:3000/list/1

完整代码

List.tsx

Outlet 嵌套路由类似 {children}

import { Outlet } from 'react-router-dom';
class List extends React.Component {
  constructor(props: React.FC) {
    super(props);
  }

  render() {
    return (
      

        
Blog
        
      
    );
  }
}

ListLink.tsx

const lists = {
  "1": {
    title: "第一篇文章",
    desc: "test1",
  },
  "2": {
    title: "第二篇文章",
    desc: "test2",
  },
};

class ListLink extends React.Component {
  constructor(props: React.FC) {
    super(props);
  }

  render() {
    return (
      

        {Object.entries(lists).map(([key, { title }]) => (
          

            
              
{title}
            
          
        ))}
      
    );
  }
}

ListId.tsx

useParams 获取路由参数

export default function ListId() {
  const lists: Record<
    string,
    {
      title: string;
      description: string;
    }
  > = {
    "1": {
      title: "第一篇博客文章",
      description: "第一篇博客文章，是关于Vue3.0的",
    },
    "2": {
      title: "第二篇博客文章",
      description: "Hello React Router v6",
    },
  };

  const { id } = useParams();
  const blog = lists[id as string];
  const { title, description } = blog;
  return (
    

      
{title}
      
{description}
    
  );
}

路由统一管理及路由拦截方案

这篇文章已经写的很好了, 就不重复说明了
react-router v6 路由统一管理及路由拦截方案

参考

React Router v6 使用指南
React Router 6: Redirect