reactrouter监听路由变化_ReactRouter入门到实践

React-Router入门与实践

React Router 保持 UI 与 URL 同步，是完整的 React 路由解决方案。在下面的例子中采用react-router-dom V5版本在浏览器中演示。

什么是路由 ?

在web开发中，我们经常会遇到“路由”这个名词。简单来说，路由就是URL到处理程序的映射 - 我们的应用程序根据URL地址来作出对应的响应。本质就是监听URL的变化，显示相应的页面。

理解React-router中的名词

“ Router ” 

一个容器, 里面包含了各种由Route定义的路由。

“ Route ”

定义一条路由(也可以称作线路)，将一个URL路径和一个处理函数(此处为React组件)对应。

“ Switch ”

路由唯一匹配，它只会渲染第一个和URL匹配的元素，如果不加Switch，则会依次渲染与URL匹配的Route。

“ Redirect ”

路由自动跳转。

“ Link ”

React版本的元素, 表示路由链接。

入门案例实践

我们可以用create-react-app生成一个项目，安装react-router-dom依赖后新建路由配置文件Routes：

然后App.js 中直接返回路由组件(路由组件已挂载至根组件，根据浏览器地址显示相应的组件)：

其实到这步一个最简单的路由已经完成了。

注:  Route中的path参数匹配URL地址，页面交给传入component的组件去渲染，exact表示你希望路径完全匹配时才渲染组件。"/user/:id"表示带动态参数的路由，可以匹配到 "/user/mia"或"/user/json" 等。如果都没匹配到，则渲染NoMatch组件。

对于页面中的组件需要跳转，我们可以使用Link标签或者使用useHistory api去跳转：

进阶 - 路由守卫 (路由鉴权)

如何验证用户是否拥有访问页面即组件的权限，我们有时候希望去守护我们的路由，让没有权限的用户不能进入，在Github issue上就这个问题有过讨论:

You can do this from within your render function. JSX doesn't need an API for this because it's more flexible.

因为JSX很灵活，所以不需要API，我们所做的只需在渲染中去添加我们自己的逻辑，编写我们自己的鉴权逻辑函数如下,：

我们拿到后端返回的角色权限通过上述路由鉴权函数去做路由权限校验，如果当前角色属于路由授权权限中，则放行，否则不通过：

最后把Routes里面的Route组件换成我们的守卫组件RouterGuard即可。