掌握React：前端开发中的路由管理

路由使用步骤：

1. 安装 yarn add react-router-dom
2. 导入 BrowserRouter as Router， Route， Link
3. 使用 Router 组件包裹整个应用
4. 使用 Link 标签 to 属性作为导航链接（入口）
5. 使用 Route 组件配置路由规则，展示组件（出口）

import React from 'react'

import ReactDOM from 'react-dom'

import {BrowserRouter as Router, Route, Link} from 'react-router-dom'

const First = () =>{

return <div>first page</div>

}

class App extends React.Component {

render(){

return (

<Router>

<div>

<Link to='/first'>页面一</Link>

<Route path='/first' component={First} />

</div>

</Router>

)

}

}

ReactDOM.render(<App />, document.getElementById('#app'))

路由说明：

路由执行过程：

默认路由：

路由模糊匹配：

路由精确匹配：