React-react-router-dom-SPA-路由

chun

2022-7-20

React 前端笔记

SPA

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

react-router-dom

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

内置组件

<BrowserRouter>
<HashRouter>
<Route>
<Redirect>
<Link>
<NavLink>
<Switch>

准备：

下载react-router-dom: npm install react-router-dom

引入bootstrap.css: <link rel="stylesheet" href="/css/bootstrap.css">

基本使用：

路由的基本使用

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

这里用一个标签将整个App包起来，保证使用的是同一个路由器

//引入react核心库
//index.js

import React from 'react'
//引入ReactDOM
import ReactDOM from 'react-dom'
//
import {BrowserRouter} from 'react-router-dom'
//引入App
import App from './App'

ReactDOM.render(
	<BrowserRouter>
		<App/>
	</BrowserRouter>,
	document.getElementById('root')
)

//App.jsx

import React, { Component } from 'react'
import { Link,Route } from 'react-router-dom'
import Home from './Home'
import About from './About'

export default class App extends Component {
  render() {
    return (
      <div>
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <div className="page-header"><h2>React Router Demo</h2></div>
        </div>
      </div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            {/* 原生html中，靠<a>跳转不同的页面 */}
            {/* <a className="list-group-item" href="./about.html">About</a>
            <a className="list-group-item active" href="./home.html">Home</a> */}

            {/* 在React中靠路由链接实现切换组件--编写路由链接 */}
            <Link className="list-group-item" to="/about">About</Link>
            <Link className="list-group-item" to="/home">Home</Link>
          </div>
        </div>
        <div className="col-xs-6">
          <div className="panel">
              <div className="panel-body">
                {/* 注册路由 */}
                <Route path='/about' component={About} />
                <Route path='/home' component={Home} />
            </div>
          </div>
        </div>
      </div>
    </div>
    )
  }
}

路由组件与一般组件的区别

写法不同：
一般组件：<Demo/>
路由组件：<Route path="/demo" component={Demo}/>
存放位置不同：
- 一般组件：components
- 路由组件：pages
接收到的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"

NavLink

NavLink可以实现路由链接的高亮，通过activeClassName属性指定样式名，默认是"active"

<NavLink activeClassName="demo" className="list-group-item" to="/home">Home</NavLink>

可以自己封装一个MyNavLink【一般组件】

<MyNavLink to="/about">About</MyNavLink>
<MyNavLink to="/home">Home</MyNavLink>


import React, { Component } from 'react'
import {NavLink} from 'react-router-dom'

export default class MyNavLink extends Component {
  render() {
	// console.log(this.props);
	return (
	  <NavLik activeClassName="demo" className="list-group-item" {...this.props} />
        //通过this.props.children可以获取标签体传过来的内容	
)
  }
}

Switch的使用

通常情况下，path和component是一一对应的关系。
Switch可以提高路由匹配效率(单一匹配)。

<Switch>
  <Route path="/about" component={About}/>
  <Route path="/home" component={Home}/>
  <Route path="/home" component={Test}/>
</Switch>

这样只要匹配到了第一个就不会再往下匹配了

解决多级路径刷新页面样式丢失的问题

public/index.html 中引入样式时不写 ./ 写 / （常用）【绝对路径】
public/index.html 中引入样式时不写 ./ 写 %PUBLIC_URL% （常用）
使用HashRouter

路由的严格匹配与模糊匹配

默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）
开启严格匹配：<Route exact={true} path="/about" component={About}/>
严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

Redirect的使用【重定向】

一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由

<Switch>
	<Route path="/about" component={About}/>
	<Route path="/home" component={Home}/>
	<Redirect to="/about"/>
</Switch>

具体方法

params参数

路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>

注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>

接收参数：this.props.match.params

search参数

路由链接(携带参数)：详情
注册路由(无需声明，正常注册即可)：
接收参数：this.props.location.search
备注：获取到的search是urlencoded编码字符串，需要借助querystring解析

import qs from 'querystring'
let obj = {name:'tom', age:18}
console.log(qs.stringify(obj)) // name=tom&age=18
let str = 'carName=Benz&price=199'
console.log(qs.parse(str)) // {carName: 'Benz', price: 199}

state参数

路由链接(携带参数)：详情
注册路由(无需声明，正常注册即可)：
接收参数：this.props.location.state
备注：刷新也可以保留住参数【history对象记录着在】

export default class Message extends Component {
  render() {
    const {messageArr} = this.state
    return (
      <div>
        <ul>
          {
            messageArr.map((msgObj)=>{
              return (
                <li key={msgObj.id}>

                  {/* 向路由组件传递params参数 */}
                  {/* <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link> */}

                  {/* 向路由组件传递search参数 */}
                  {/* <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link> */}

                  {/* 向路由组件传递state参数 */}
                  <Link to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link>

                </li>
              )
            })
          }
        </ul>
        <hr/>
        {/* 声明接收params参数 */}
        {/* <Route path="/home/message/detail/:id/:title" component={Detail}/> */}

        {/* search参数无需声明接收，正常注册路由即可 */}
        {/* <Route path="/home/message/detail" component={Detail}/> */}

        {/* state参数无需声明接收，正常注册路由即可 */}
        <Route path="/home/message/detail" component={Detail}/>
      </div>
    )
  }
}


import React, { Component } from 'react'
// import qs from 'querystring'

export default class Detail extends Component {
  render() {
    console.log(this.props);

    // 接收params参数
    // const {id,title} = this.props.match.params 

    // 接收search参数
    // const {search} = this.props.location
    // const {id,title} = qs.parse(search.slice(1))

    // 接收state参数
    const {id,title} = this.props.location.state || {}

    const findResult = DetailData.find((detailObj)=>{
      return detailObj.id === id
    }) || {}
    return (
      <ul>
        <li>ID:{id}</li>
        <li>TITLE:{title}</li>
        <li>CONTENT:{findResult.content}</li>
      </ul>
    )
  }
}

编程式路由导航

借助this.prosp.history对象上的API对操作路由跳转、前进、后退

this.prosp.history.push()
this.prosp.history.replace()
this.prosp.history.goBack()
this.prosp.history.goForward()
this.prosp.history.go()

withRouter的使用

export default withRouter(Header)

withRouter可以加工一般组件，让一般组件具备路由组件所特有的API
withRouter的返回值是一个新组件

BrowserRouter与HashRouter的区别

底层原理不一样：
BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
HashRouter使用的是URL的哈希值。
path表现形式不一样
BrowserRouter的路径中没有#,例如：localhost:3000/demo/test
HashRouter的路径包含#,例如：localhost:3000/#/demo/test
刷新后对路由state参数的影响
(1) BrowserRouter没有任何影响，因为state保存在history对象中。
(2) HashRouter刷新后会导致路由state参数的丢失

阅读剩余

作者：chun

链接：https://chun53.top/1547.html

文章版权归作者所有，未经允许请勿转载。

THE END