React---路由的使用(一)

半指温柔乐

发布于 2021-04-26 02:07:39

1.5K00

代码可运行

文章被收录于专栏：前端知识分享前端知识分享

运行总次数：0

代码可运行

一、SPA的理解

单页Web应用（single page web application，SPA）。
整个应用只有一个完整的页面。
点击页面中的链接不会刷新页面，只会做页面的局部更新。
数据都需要通过ajax请求获取, 并在前端异步展现。

二、路由的理解

什么是路由?
1. 一个路由就是一个映射关系(key:value)
2. key为路径, value可能是function或component
路由分类
1. 后端路由：

　　　　　　　　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 }