在基础步骤的第一步中安装软件包。
npm i react-Router-dom@5.3.0此软件包提供三个核心组件：HashRouter、route和Link
(上个月刚出6.0，还不稳定。 请稳定后再使用)
步骤2导入并使用软件包。
导入{ hash Router，route，Link } from 'react-router-dom '步骤3
使用Link指定导航链接
使用Route指定路由规则(哪个路径指示哪个组件)
根三大对象的-Router
Router组件：包装整个APP应用程序，并且只能在一个react APP应用程序中使用一次
(两种常用路由器： hash router和BrowserRouter (推荐) ) ) ) ) ) ) ) ) )。
HashRouter:
使用URL哈希值实现
原理：拦截window的hashchange事件实现
浏览器路由器：
使用H5的history.pushState () API实现
原理：拦截window的popstate事件实现的
路由三大对象的-Link
Link和NavLink常用于指定Link:的导航链接
Link:
Link组件最终渲染为a标记，并指定路由导航
to属性，将来渲染为a标签的href属性
Link组件无法指示选择了哪个Link
NavLink:
NavLink组件。 一个更特殊的Link组件，可以用于指定当前导航，缺省情况下使用active类名
指定地址的to属性。 它被渲染为a标签的href属性
activeClassName:用于指定突出显示的类名，它是默认的active。 一般不修改。
exact:正确匹配意味着地址栏和to属性值必须与类名正确匹配才能生效
根三大对象的-Route
确定路由匹配规则
格式： Route path='/xx/xx' component={组件}/Route
匹配规则
名词约定：
path: Route组件的path属性值
path的值：指向以下格式
link组件的to属性值
地址栏地址
模糊匹配规则
如果pathname以path开头，匹配就会成功
匹配后加载对应的组件；
整个匹配过程是一个个匹配，即使一个匹配成功，匹配也不会停止。
模糊匹配与精确匹配
默认值为模糊匹配
补充exact可以设置为精确匹配
交换机
使用交换机组件包裹多个路由组件。 在Switch组件下，无论有多少匹配的规则，都只会渲染第一个匹配的组件
处理第404页
想法：不设定path属性，将对应于404页的路由放在交换机内部的最后位置通常被用作驱动器
页面跳转重定向
页面跳转
格式
当redirect from='/' exact to='/comment ' /匹配'/'时自动匹配'/comment '
示例importreactfrom ' react ' importreactdomfrom ' react-DOM ' import { use history } from ' react-router ' import './04.04 sitch } from ' react-router-DOM ' importloginfrom './pages/log in ' importcommentfrom './pages/commment ' imports ss comment ' import search ' import page 404 from './page 404 ' exportdefaultfunctionapp ({ const history=use history ) } console 登录'登录/NavLink NavLink to='/comment '注释/NavLink NavLink to='/search '搜索/navlink HR/swit CCH log in ' componenent comment ' component={ comment }/route path='/search ' component={ search } component={ search } sitch/router/didiont document.getelementbyid ) (' root ' ) )编程导航编程导航格式第一步) ) )。
导入{ use history } from ' react-router ' http://www.Sina.com /
const history=useHistory ()第二步注册
history.push(/find ) )第三步使用 与vue一般无二
import { use history } from ' react-router ' exportdefaultfunctionapp ({ const history=use history ) (历史. push ) ) 参数n表示前面或后面的页数。 例如，-1表示返回上一页。 (History.go(-1 )//entry/frend )替换在记录history中没有记录history.replace )/frend )的嵌套路由的配置
是在组件中再设置一个上面我说的话，但请记住Router不需要写
路由注意事项
配置嵌套路由时，必须处理路径，并且必须在匹配子路由之前匹配父路由
注意使用exact
执行流程
单击了Link组件(a选项卡)，并修改了浏览器地址栏中的url
React根收到了地址栏url的变化。 混变pop state
React路由在内部遍历所有路由组件，并使用路由规则path与pathname(hash )匹配
在路由规则(path )与地址栏中的pathname (path )一致时，表示该路由组件的内容