React Router应该是React生态系统中最受欢迎的库了,npm周下载量达600w+,github也有45.2k的加星,足以说明它是一款非常优秀的库,作为React社区重要的库,它经历了多次迭代和重大更改,就在上个月,更是迎来了一个大的正式版更新6.x,当前最新为6.0.2,相对比于之前的5.x版本做出了较大改变,不管从用法还是从性能上都有了明显的提升,本文也将用新老版本对比的方式让你能以最快的速度上手新用法
话不多说,先列出6.0做出的改变之处:
组件变化较大,移除了component与render属性,使用element属性替代,因为与之前的版本代码写法不能兼容,写法区别如下
// 5.x用法
}/>
// 6.x用法
} />
} />
v6版本移除了 组件,并使用替换,除了能替代 组件的功能外,也做了一些改变,比如所有的都必须包裹在中,否则抛出错误
// 5.x用法
// 6.x用法
} />
} />
v6版本的react-router支持多种嵌套路由写法,写法分别如下:
// App.jsx
} />
} />
// User.jsx
} />
} />
虽然组件结构与v5版本一至,但写法上有一定的差异,父组件App.jsx中的path属性最后必须使用星号(path="/user/*"),子组件User.jsx中的路径都是相对于其父级路径,所以不需要像v5版本那样写全整个路径,妈妈再也不用担心我会写错地址。
编辑
添加图片注释,不超过 140 字(可选)
// App.jsx
} />
}>
} />
} />
// User.jsx
\
编辑
添加图片注释,不超过 140 字(可选)
function App(){
// 以下写法与第二种写法效果一至
const element = useRoutes([
{path:'/home',element: },
{
path:'/user',
element: ,
children:[
{path:'profile',element: },
{path:':/id',element: },
]
}
])
return element
}
以上三种写法各有各的优点,开发者可以根据自身的需求选择一种来实现你的嵌套路由
新版本的react-router移除了组件,但可以使用新增的组件配合组件实现重定向效果
} />
}>
路由配置好后免不了要进行页面跳转,但新版的react-router移除了history对象,故不能使用v5版本的history(包括useHistory hook)已不能使用,我们可以使用以下两中方式进行跳转
// v5版本
首页
首页
// v6版本
(isActive?{color:'#f00'}:{})}>首页
isActive?'current':''}>首页
import { useNavigate } from "react-router-dom";
let navigate = useNavigate();
navigate(`/home`);
// 跳转且不保留浏览记录
navigate(`/home`,{replace:true});
// 返回上一页
navigate(-1)
// 对象方式跳转
navigate({
pathname:'/home'
})
需要注意一点就是,在v6版本的react-router中,如果跳转的路径如果不是以/开头,则为相对路径,相对于其父级路由路径,这样的设置能让我们更好的控制跳转
我们都知道,在进行路由跳转时,可以附带一些参数一起传递到跳转页面,新版的react-router已经从props中移除了history、location、match,也移除掉了withRouter高阶组件,所以无法使用老版本的方式传参与接收,新版用法如下
let navigate = useNavigate();
navigate(`/home?page=1&size=10`);
navigate({
pathname:'/home',
search:'page=1&size=10'
});
在对应组件接收参数也很简单,使用useSearchParams hook进行接收,得到URLSearchParams对象以及设置search参数函数组成的数据
function Home(){
const [searchParams,setSearchParams] = useSearchParams()
searchParams.get('page');//1
searchParams.get('size');//10
return (
首页
)
}
动态路由传参
}>
} />
配置完以上路由后,当页面跳转到/user/123这个路径时,可以在组件中使用useParams hook获取123这个id
function UserDetail(){
const {id} = useParams()
return (
id:{id}
)
}
state传参通过、或 useNavigate进行跳转时,都可以传递state参数,用法如下:
首页
navigate('/home',{state:{idx:1,key:'qf'}})
在首页组件中通过useLocation hook获取state值
function Home(){
const {state} = useLocation();
state.idx; // 1
state.key; // qf
return (
首页
)
}
另外,React路由同样支持SSR服务端渲染等其它功能,由于篇幅在限,在此不做过多说明,感兴趣的小伙伴请继续关注我,后续的写文章专门介绍react-router在在服务端的用法。
以上就是本文的所有内容,希望通过该文章能让大家对新版本react-router有个全面的认识,以便在项目中应用新版路由。