通过vue学习react（五）——路由router
reactrouterv6版的路由实现如果喜欢请点赞安装pnpmaddreact-router-dom完整代码#App.tsxfunctionApp(){return(Home关于关于}>}>}/>}>}>}>
);}api方法含义useParams根据路径读取参数返回当前参数useNavigatereturnsThecurrentroute替换了原V5中的useHistory。useOutlet返回根据路由生成的元素。useLocation返回当前位置对象。useRoutes和Routers组件一样，只是在js中使用了useSearchParams来匹配URL中的搜索参数。基础路由实现Home，About代码不会显示
}>}>/Route>就是定义路由地址组件localhost:3000/Home组件localhost:3000/about组件，不过这些很快就清楚了，但是需要明白的是嵌套路由下面的代码主要是基于列表的404route}/>当在Routes中没有找到时，我们可以在最后一个route中添加正则来指定404。使用导航组件重定向。我们可以使用ReactRouter的Navigate组件来执行声明式重定向。在下面的示例中，每当用户导航到“关于”页面时，导航组件将以声明方式执行重定向：constAbout=()=>{constshouldRedirect=true;return(<>About
{shouldRedirect&&});};如果我们想在路由级别管理它，我们还可以使用以下替代解决方案：#App.tsx):()}/>使用重定向导航挂钩constAbout=()=>{constshouldRedirect=true;constnavigate=useNavigate();React.useEffect(()=>{if(shouldRedirect){navigate('/home');}});返回(<>关于
);};React的useEffectHook会在组件呈现时运行，并以编程方式执行重定向。嵌套路由（list）的实现}>}>}>上面代码的主要构成是这样的，当我们访问http://localhost:3000/list
当我们访问http://localhost:3000/list/1
完整代码List.tsxOutlet嵌套路由类似于{children}import{Outlet}from'react-router-dom';类列表扩展了React。Component{constructor(props:React.FC){super(props);}render(){return(Blog
);}}ListLink.tsxconstlists={"1":{title:"第一篇",desc:"test1",},"2":{title:"第二篇",desc:"test2",},};类ListLink扩展了React.Component{constructor(props:React.FC){super(props);}render(){return(
{Object.entries(lists).map(([key,{title}])=>({title}
))}
);}}ListId.tsxuseParams获取路由参数exportdefaultfunctionListId(){constlists:Record
={"1":{title:"第一篇博文",description:"第一篇博文，关于Vue3.0",},"2":{title:"第二篇博文",description:"你好ReactRouterv6",},};const{id}=useParams();constblog=lists[idasstring];const{标题，描述}=博客；返回({title}
{description}</p>
);}这篇文章对于统一路由管理和路由拦截方案已经写的很好了，关于react-routerv6统一路由管理和路由拦截方案的描述我就不重复了。参考ReactRouterv6使用指南ReactRouter6:Redirect
