数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究React.js 路由基础
React 路由的一些基础知识
React-router 是主要的库，而 react-router-dom 和 react-router-native 是特定环境的库。React-router-dom 通常用于基于浏览器的 Web 应用程序。react-router-native 用于可以使用 react-native 开发的移动应用程序。
要安装它，请使用命令 npm install –save react-router-dom
在 Web 应用程序的情况下，有两种类型的路由器。
- BrowserRouter
- HashRouter
两种路由器类型之间的区别体现在它们构建 URL 的方式上。
例如：http://hello.com/about => BrowserRouter
例如：http://hello.com/#/about => HashRouter（在其中使用哈希）
BrowserRouter 更受欢迎，它使用 html5 history API 来跟踪位置。
HashRouter 支持不支持 html5 history API 的旧版浏览器。
JavaScript History API：它有助于跟踪导航、历史堆栈，并在会话之间持久化位置状态。组件创建 history 对象，该对象使用 history.location 跟踪当前位置。
每次点击 Link 组件时都会调用 History.push()。如果点击 Redirect 组件，则会调用 history.replace。类似地，history.goBack 和 history.goForward 用于在历史堆栈中向前和向后导航。
Route 组件是路由器中的主要组件，如果匹配，它将在页面中显示提供的组件。如果需要完全匹配 URL，则在路由路径上添加 exact=true。Route 具有 render 属性，用于处理内联渲染。如果路径完全匹配，则 Render 期望一个返回元素的函数。
Link 组件是用于在页面之间导航的锚标记，无需重新加载页面。
路由组件上的 path 属性使用 path-to-RegExp 库将字符串转换为正则表达式。当前位置将与之匹配。
一旦我们匹配了路由组件上给定的路径和浏览器上的当前位置，就会创建一个包含以下信息的匹配对象以供进一步使用：
match.path=>包含路由路径值的字符串。
match.url=>浏览器中 URL 的匹配部分。
match.isExact=>布尔值。
switch - 使用 switch 的好处是它将返回第一个匹配的路由并丢弃其他路由。
如果没有 switch，所有匹配的路径都将被渲染。例如，如果浏览器中的 URL 为 /player，则路径 /player 和 /player/1 都将被渲染。Switch 避免了多个路径匹配。它将返回第一个匹配项。
基本示例
<BrowserRouter>
<Route exact path="/" component={MainPage}/>
<Route path="/users" component={Users}/>
<Route path="/login" component={Login}/>
<Route path="/customers" component={Customers}/>
</BrowserRouter>
420 次浏览
