标签：root 路径 路由 使用 规则 相关 元素 一个 Route组件
现代前端大多数都是SPA（单页面程序），也就是只有一个HTML页面的应用程序，因为它的用户体验更好，对服务器压力更小，所以更受欢迎，为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。
前端 路由的功能：让用户从一个视图（页面）导航到另一个视图（页面）
前端路由是一套映射规则，在React中，是URL路径与组件的对应关系
使用React路由简单来说，就是配置路径和组件
路由的基本使用步骤：
1 import React from ‘react‘; 2 import ReactDOM from ‘react-dom‘; 3 // 1.先安装react-router-dom 4 // 2.导入BrowserRouter as Router,Route,Link 5 import {BrowserRouter as Router,Route,Link} from ‘react-router-dom‘ 6 // 路由的基本使用 7 const First=()=><div>1233</div> 8 const App=()=>{ 9 return ( 10 // 3.使用Router包裹组件元素 11 <Router> 12 <div> 13 <h1>路由基础</h1> 14 {/* 4.使用Link设置路径入口 会被编译为a标签 */} 15 <Link to="/first">页面7</Link> 16 {/* 5.使用Route中path表示路径跳转，component 表示要展示的组件 Route写在哪，展示的内容就渲染在哪 */} 17 <Route path="/first" component={First}></Route> 18 </div> 19 </Router> 20 ) 21 } 22 ReactDOM.render(<App />, document.getElementById(‘root‘));
路由中常用组件的说明：
Router组件：包裹整个应用：一个React应用只使用一次
两种常用的Router：HashRouter和BrowserRouter
HashRouter：使用URL的哈希值实现，就是在地址栏的后面有#（localhost:3000/#/sdjdjdj）
推荐使用BrowserRouter：使用H5的historyAPI实现（localhost:3000/djjdd）
Link:组件：用于指定导航链接（a标签） 在浏览器解析时，会将link组件解析成a标签
Router组件：指定路由展示相关的组件信息
路由执行过程：
1.点击link组件（a标签），修改了浏览器地址栏中的url
2.React路由监听到地址栏中url的变化
3.React 路由内部遍历所有Router组件，使用路由规则（path）与pathname进行匹配
4.当路由规则（path）能够匹配地址栏中的pathname时，就展示该Route组件的内容
编程式导航：
通过JS代码来实现页面跳转
history是React路由提供的，用于获取浏览器历史记录的相关信息
push（path）：跳转到某个页面，参数path表示要跳转的地址
go（n）：前进或后退到某个页面，参数n表示前进或后退页面数量
1 class Login extends Component { 2 handleLogin = () => { 3 // 使用编程式导航实现页面之间的跳转 4 this.props.history.push(‘/home‘) 5 } 6 render() {...省略其他代码} } 7 在函数组件中使用 8 props.history.push("/home") 9 ---"/home" 表示将要跳转的页面路径
默认路由：表示进入页面就会匹配的路由
默认路由的path为：/
1 <Route path="/" component={Home} /> 2 表示在页面一开始加载就跳转到Home组件，展示Home组件的内容
标签：root 路径 路由 使用 规则 相关 元素 一个 Route组件
原文地址：https://www.cnblogs.com/qdjj/p/12359530.html
