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

2021年09月15日 阅读数:1
这篇文章主要向大家介绍React---路由的使用(一),主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

1、SPA的理解

  1. 单页Web应用(single page web application,SPA)。
  2. 整个应用只有一个完整的页面
  3. 点击页面中的连接不会刷新页面,只会作页面的局部更新。
  4. 数据都须要经过ajax请求获取, 并在前端异步展示。

2、路由的理解

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

        1) 理解: value是function, 用来处理客户端提交的请求。html

        2) 注册路由: router.get(path, function(req, res))前端

        3) 工做过程:当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据node

      2. 前端路由:react

        1) 浏览器端路由,value是component,用于展现页面内容。web

        2) 注册路由: <Route path="/test" component={Test}>ajax

        3) 工做过程:当浏览器的path变为/test时, 当前路由组件就会变为Test组件后端

2、react-router-dom的理解

  1. react的一个插件库。
  2. 专门用来实现一个SPA应用。
  3. 基于react的项目基本都会用到此库。

3、react-router-dom相关API

1. 内置组件

  1. <BrowserRouter>
  2. <HashRouter>
  3. <Route>
  4. <Redirect>
  5. <Link>
  6. <NavLink>
  7. <Switch>
  8. history对象
  9. match对象
  10. withRouter函数

2. 其它

  1. history对象
  2. match对象
  3. withRouter函数

3.路由的基本使用

            1.明确好界面中的导航区、展现区
            2.导航区的a标签改成 Link标签
                        < Link to="/xxxxx">Demo</Link>
            3.展现区写Route标签进行路径的匹配
                        < Route path='/xxxx'  component={Demo}/>
            4.<App>的最外侧包裹了一个< BrowserRouter>或<HashRouter>

4、路由组件与通常组件

            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"

5、代码

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.jsreact-router

 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.jsxapp

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 }

 

 

本文同步分享在 博客“半指温柔乐”(CNBlog)。
若有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一块儿分享。