当前位置 博文首页 > CSDN凉宸：带你走进React路由的世界
对路由进行管理。在传统的没有使用路由情况下，通过读取url中的hash值来进行识别加载的组件
react路由则将路由解析，映射关系进行了封装，通过配置进行管理
现代的前端多数是SPA（单页面程序），SPA使用户的体验更好、服务器压力小，所以才会如此受欢迎
1）规则配置： 根据配置的规则进行对应匹配
2）路径匹配：根据路径中定义的参数进行对应匹配
3）优先级：在相同的规则下，顶层规则会被优先匹配
安装
npm install --save react-router-dom
导入路由核心组件
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
使用Router进行包裹
<Router>
<div className="app">
<h1>5555555</h1>
</div>
</Router>
使用Link作为导航菜单的路由入口
<ul>
<li>
<Link to="/first">first</Link>
</li>
<li>
<Link to="/two">Two</Link>
</li>
</ul>
Route配置路由规则和要展示的组件
<div>
<Route path="/first" component={First}></Route>
<Route path="/two" component={Two}></Route>
</div>
演示：
完整代码：
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
class App extends React.Component {
state = {
num: 1
}
render () {
return (
<Router>
<div className="app">
<div>
<ul>
<li>
<Link to="/first">first</Link>
</li>
<li>
<Link to="/two">Two</Link>
</li>
</ul>
</div>
<div>
<Route path="/first" component={First}></Route>
<Route path="/two" component={Two}></Route>
</div>
</div>
</Router>
)
}
}
const First = () => [
<div>
First
</div>
]
const Two = () => [
<div>
Two
</div>
]
ReactDOM.render(
<App />,
document.getElementById('root')
);
两种常用的Router： HashRouter和BrowserRouter
HashRouter： 使用URL的Hash值实现 （localhost:3000/#/first）
推荐 BrowserRouter：使用H5的history API实现（localhost3000/first）
最终Link会编译成a标签，而to属性会被编译成 a标签的href属性
path属性：路由规则，这里必须跟Link组件里面to属性的值一致
component属性：展示的组件
Route写在哪，渲染出来的组件就在哪
表示进入页面时就会直接匹配展示的路由，我们需要将path改成 /
不管Link组件的to属性值为什么，默认路由都会被匹配成功
因为React路由在默认情况下是模糊匹配的，只要pathname以path开头就会匹配成功然后显示到页面
我们要避免此类情况的发生，将匹配模式改为精准匹配
我们需要在Route中添加exact属性，这样就会变成精准匹配
只有pathname和path全等时才会进行展示
这样就完全没问题了
