React---路由的使用(一)
一、SPA的理解
- 单页Web应用（single page web application，SPA）。
- 整个应用只有一个完整的页面。
- 点击页面中的链接不会刷新页面，只会做页面的局部更新。
- 数据都需要通过ajax请求获取, 并在前端异步展现。
二、路由的理解
- 什么是路由?
- 一个路由就是一个映射关系(key:value)
- key为路径, value可能是function或component
- 路由分类
- 后端路由：
1) 理解： value是function, 用来处理客户端提交的请求。
2) 注册路由： router.get(path, function(req, res))
3) 工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
2. 前端路由：
1) 浏览器端路由，value是component，用于展示页面内容。
2) 注册路由: <Route path="/test" component={Test}>
3) 工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件
二、react-router-dom的理解
- react的一个插件库。
- 专门用来实现一个SPA应用。
- 基于react的项目基本都会用到此库。
三、react-router-dom相关API
1. 内置组件
- <BrowserRouter>
- <HashRouter>
- <Route>
- <Redirect>
- <Link>
- <NavLink>
- <Switch>
- history对象
- match对象
- withRouter函数
2. 其它
- history对象
- match对象
- withRouter函数
3.路由的基本使用
1.明确好界面中的导航区、展示区
2.导航区的a标签改为Link标签
<Link to="/xxxxx">Demo</Link>
3.展示区写Route标签进行路径的匹配
<Route path='/xxxx' component={Demo}/>
4.<App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>
四、路由组件与一般组件
1.写法不同：
一般组件：<Demo/>
路由组件：<Route path="/demo" component={Demo}/>
2.存放位置不同：
一般组件：components
路由组件：pages
3.接收到的props不同：
一般组件：写组件标签时传递了什么，就能收到什么
路由组件：接收到三个固定的属性
history:
go: ƒ go(n)
goBack: ƒ goBack()
goForward: ƒ goForward()
push: ƒ push(path, state)
replace: ƒ replace(path, state)
location:
pathname: "/about"
search: ""
state: undefined
match:
params: {}
path: "/about"
url: "/about"
五、代码
1.App.jsx
1 import React, { Component } from 'react'
2 import {Link,Route} from 'react-router-dom'
3 import Home from './components/Home'
4 import About from './components/About'
5
6 export default class App extends Component {
7 render() {
8 return (
9 <div>
10 <div className="row">
11 <div className="col-xs-offset-2 col-xs-8">
12 <div className="page-header"><h2>React Router Demo</h2></div>
13 </div>
14 </div>
15 <div className="row">
16 <div className="col-xs-2 col-xs-offset-2">
17 <div className="list-group">
18
19 {/* 原生html中，靠<a>跳转不同的页面 */}
20 {/* <a className="list-group-item" href="./about.html">About</a>
21 <a className="list-group-item active" href="./home.html">Home</a> */}
22
23 {/* 在React中靠路由链接实现切换组件--编写路由链接 */}
24 <Link className="list-group-item" to="/about">About</Link>
25 <Link className="list-group-item" to="/home">Home</Link>
26 </div>
27 </div>
28 <div className="col-xs-6">
29 <div className="panel">
30 <div className="panel-body">
31 {/* 注册路由 */}
32 <Route path="/about" component={About}/>
33 <Route path="/home" component={Home}/>
34 </div>
35 </div>
36 </div>
37 </div>
38 </div>
39 )
40 }
41 }2.index.js
1 //引入react核心库
2 import React from 'react'
3 //引入ReactDOM
4 import ReactDOM from 'react-dom'
5 //
6 import {BrowserRouter} from 'react-router-dom'
7 //引入App
8 import App from './App'
9
10 ReactDOM.render(
11 <BrowserRouter>
12 <App/>
13 </BrowserRouter>,
14 document.getElementById('root')
15 )3.Home.jsx
1 import React, { Component } from 'react'
2
3 export default class Home extends Component {
4 render() {
5 return (
6 <h3>我是Home的内容</h3>
7 )
8 }
9 }4.About.jsx
1 import React, { Component } from 'react'
2
3 export default class About extends Component {
4 render() {
5 return (
6 <h3>我是About的内容</h3>
7 )
8 }
9 }