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.location
创建历史记录对象，用于跟踪当前位置。每当我们点击 Link 组件时，就会调用 History.push()。如果点击 Redirect 组件，则会调用 history.replace。同样，history.goback 和 history.goForward 用于在历史记录堆栈中来回导航。
Route 组件是路由器中的主要组件，如果匹配，则会在页面中显示提供的组件。如果 URL 必须完全匹配，则在路由路径上添加 exact=true。路由具有用于处理内联渲染的 render 属性。Render 需要一个函数，如果路径完全匹配，则返回一个元素。
Link 组件是用于在不重新加载页面的情况下在页面之间导航的锚标记。
路由组件上的 path 属性使用 path-to-RegExp 库将字符串转换为正则表达式。当前位置将与其匹配。
一旦我们将路由组件中给定的路径与浏览器上的当前位置匹配，就会创建一个包含以下信息的 match 对象，以供进一步使用 −
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>
相关文章
有用资源
javascript 参考教程 - 该教程包含有关 javascript 的更多信息:https://www.cainiaomax.com/javascript/
