![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React Router
幸福了,然后呢
老老实实,努力挣钱~~
展开
-
react router -- Hooks
react router之HooksHooksReact Router带有几个钩子,允许你访问路由器的状态并从组件内部执行导航note:需要使用React>=16.8版本才能使用这些钩子!useHistoryuseLocationuseParamsuseRouteMatch一、useHistoryuseHistory钩子允许你访问可用于导航的历史实例按官网原代...原创 2020-04-26 10:19:27 · 1296 阅读 · 0 评论 -
React Router Redirect记录
react-router之Redirect此文章有部分内容借鉴:https://www.jianshu.com/p/97e4af32811a,感谢~Redirect渲染<Redirect>将导航到新位置。新位置将覆盖历史堆栈中的当前位置,就像服务器端重定向(HTTP 3xx)一样。import React from "react";import ReactDOM from...原创 2020-04-07 09:25:46 · 484 阅读 · 0 评论 -
Query parameters 查询参数
react router之Query parameters 查询参数参考文章:https://www.mediaat.cn/news/show-3418.html该示例其实本质是借用了浏览器内置的URLSearchParams,这个方法可以很方便的解析url参数,但这个存在兼容问题,放弃IE家族就没问题了。具体URLSearchParamsAPI,可参考MDN这段示例代码:var par...原创 2020-03-31 09:50:36 · 2931 阅读 · 0 评论 -
Url Parameters
react-router之Url Parameters1- 如何匹配路径参数:import React from "react";import { BrowserRouter as Router, Switch, Route, Link, useParams} from "react-router-dom";// Params是URL中以冒号开头的占位符,如本例中路...原创 2020-03-30 10:25:39 · 740 阅读 · 0 评论 -
NavLink组件
react-router之NavLink组件本文内容整理参考借鉴以下文章:https://www.jianshu.com/p/6583b7258e78https://reacttraining.com/react-router/web/api/BrowserRouter在此以表感谢!1–<Link>的一个特殊版本,当呈现的元素与当前URL匹配时,它将向其添加样式属性。2–...原创 2020-03-26 10:20:33 · 1853 阅读 · 0 评论 -
Switch组件
react-router之Switch组件本文内容整理参考借鉴以下文章:https://www.jianshu.com/p/6583b7258e78https://reacttraining.com/react-router/web/api/BrowserRouter在此以表感谢!渲染第一个匹配到地址(location)的<Route>或者<Redirect>...原创 2020-03-23 10:15:16 · 236 阅读 · 0 评论 -
react 404 Page
react-router之404 Page–你可以使用<Switch>中的最后一个<Route>作为一种“回退”路由来捕获404个错误。–关于这个例子,有一些有用的东西值得注意:一个<Switch>渲染匹配的第一个子<Route><Redirect>可用于将旧URL重定向到新URL<Route path=" * "&g...原创 2020-03-20 13:44:04 · 471 阅读 · 0 评论 -
BrowserRouter和HashRouter
react-router之BrowserRouter和HashRouter本文内容整理参考借鉴以下文章:https://www.jianshu.com/p/6583b7258e78https://reacttraining.com/react-router/web/api/BrowserRouter在此以表感谢!一、BrowserRouterBrowserRouter主要使用在浏览器...原创 2020-03-17 15:24:18 · 1266 阅读 · 0 评论 -
Link组件
react-router之Link本文内容整理参考借鉴以下文章:https://www.jianshu.com/p/6583b7258e78https://reacttraining.com/react-router/web/api/BrowserRouter在此以表感谢!LinkLink使用声明式的方式为应用程序提供导航功能,定义的Link最终会被渲染成一个a标签。Link使用to...原创 2020-03-18 16:15:57 · 805 阅读 · 1 评论 -
Route组件
react-router之Route组件本文内容整理参考借鉴以下文章:https://www.jianshu.com/p/6583b7258e78https://reacttraining.com/react-router/web/api/BrowserRouter在此以表感谢!Route路由组件(Route)可能是React路由器中最重要的组件,可以帮助您更好地理解和学习使用。它最...原创 2020-03-20 10:25:59 · 564 阅读 · 0 评论