React.js路由基础
反应路由的一些基础
React-router是主要的库,而react-router-dom和react-router-native是特定于环境的库。React-router-dom通常用于基于浏览器的Web应用程序中。react-router-native用于基于移动的应用程序,可以使用react-native开发。
要安装它,请使用命令npminstall–savereact-router-dom
对于Web应用程序,有两种类型的路由器。
浏览器路由器
哈希路由器
两种路由器类型之间的区别在它们表示URL的方式中可见。
例如http://hello.com/about=>BrowserRouter
例如http://hello.com/#/about=>HashRouter(在其中使用哈希)
BrowserRouter更受欢迎,它使用html5历史记录API来跟踪位置。
HashRouter支持不支持html5历史记录API的旧式旧浏览器。
JavaScript历史记录API:它有助于跟踪导航,历史记录堆栈,并在会话之间保持位置状态。组件创建历史记录对象,该对象使用history.location跟踪当前位置
每当我们单击链接组件时,都会调用History.push()。如果单击重定向组件,则会调用history.replace。同样,history.goback和history.goForward用于在历史记录堆栈中来回导航。
路由 组件是路由器中的主要组件,如果匹配,它将在页面中显示提供的组件。如果必须完全匹配url,则在路由路径上添加精确=真。Route具有render属性,可以处理内联渲染。如果路径完全匹配,Render期望有一个返回元素的函数。
链接 组件是用于在页面之间导航而无需重新加载页面的定位标记。
route组件上的path属性使用path-to-RegExp库将字符串转换为正则表达式。当前位置将与之匹配。
一旦我们匹配了路径组件上给出的路径和浏览器上的当前位置,便会创建一个匹配对象,其中包含以下信息以供进一步使用-
match.path=>一个包含路径路径值的字符串。
match.url=>浏览器中URL的匹配部分。
match.isExact=>这是一个布尔值。
switch-使用switch的好处是它将返回第一个匹配的路由并丢弃其他路由。
如果不进行切换,则将渲染所有匹配的路径。例如,如果我们在浏览器中具有类似/player的网址,则会同时渲染/player和/player/1路径。交换机避免多路径匹配。它将返回第一个比赛。
基本示例
<BrowserRouter> <Route exact path="/" component={MainPage}/> <Route path="/users" component={Users}/> <Route path="/login" component={Login}/> <Route path="/customers" component={Customers}/> </BrowserRouter>