记录学习react-router-v6

285 阅读1分钟

编程式路由

在router文件夹新建一个index的文件,从react-router-dom中导入{useRoutes},其次就可以跟vue里面的路由一样,首先创建一个routes数组,里面包含了各种路由关系,建立好关系以后创建路由对象,在导出到main中使用BrowserRouter组件包裹导出的组件。 当path为空的情况下,相当于重定向到该指定的组件element:。当有children子组件时,需要重定向的需要用到

code1.png

嵌套路由

当有嵌套路由的情况下,这个时候我们需要用到组件,这个组件相当于vue中的标签。

code1.png

编程式跳转

当需要编程式跳转的时候,我们可以从router里面导入navigate方法,可以直接跟跳转的路径,也可以携带参数。如果navigate(-1)则会向后退一个窗格也相当于Vue中的goback方法。

code2.png

获取路由携带的参数

获取跳转时,携带在state里面的参数,我们可以通过导入useLocation方法。

code2.png

获取url参数的时需要通过 useSearchParams方法。

code2.png

当路径为动态路由时,则使用useParams获取参数

code2.png