16 路由

12/12/2021 react

# 路由的基本使用

  1. 明确好界面中的导航区、展示区

  2. 导航区的a标签改为Link标签

    <Link to="/xxxxx">Demo</Link>
  1. 展示区写Route标签进行路径的匹配
    <Route path='/xxxx' component={Demo}/>
  1. <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"
NavLink可以实现路由链接的高亮,通过activeClassName指定样式名
<MyNavLink to="/about">About</MyNavLink>
import React, { Component } from 'react'
import {NavLink} from 'react-router-dom'

export default class MyNavLink extends Component {
	render() {
		// console.log(this.props);
		return (
			<NavLink activeClassName="atguigu" className="list-group-item" {...this.props}/>
		)
	}
}

# Switch的使用

1.通常情况下,path和component是一一对应的关系。  
2.Switch可以提高路由匹配效率(单一匹配)。  
    <Switch>
        <Route path="/about" component={About}/>
        <Route path="/home" component={Home}/>
        <Route path="/home" component={Test}/> {/* 不匹配 */} 
    </Switch>

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

1.public/index.html 中 引入样式时不写 ./ 写 / (常用)  
2.public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% (常用)  
3.使用HashRouter  
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>react脚手架</title>
		<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

        <!-- 这里使用 / 或者  %PUBLIC_URL%/ -->
		<link rel="stylesheet" href="/css/bootstrap.css">
	</head>
	<body>
		<div id="root"></div>
	</body>
</html>

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

  1. 默认使用的是模糊匹配(简单记:【输入的路径】必须包含要【匹配的路径】,且顺序要一致)
  2. 开启严格匹配:<Route exact={true} path="/about" component={About}/>
  3. 严格匹配不要随便开启,需要再开,有些时候开启会导致无法继续匹配二级路由
{/* 路由链接 */}
<MyNavLink to="/about/detail">About</MyNavLink>

{/* 路由注册 */}
<Route 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参数

路由链接(携带参数):

<Link to='/demo/test?name=tom&age=18'>详情</Link>

注册路由(无需声明,正常注册即可):

<Route path="/demo/test" component={Test}/>

接收参数:

this.props.location.search

备注:获取到的 search 是 urlencoded 编码字符串,需要借助 querystring 解析

qs 替代:unshiftio/url-parse: Small footprint URL parser that works seamlessly across Node.js and browser environments. (opens new window)

  • state参数

路由链接(携带参数):

<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>

注册路由(无需声明,正常注册即可):

<Route path="/demo/test" component={Test}/>

接收参数:

this.props.location.state

备注:刷新也可以保留住参数

# 编程式路由导航

借助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

React Router: Declarative Routing for React.js (opens new window) React Router: Declarative Routing for React.js (opens new window)

# BrowserRouter 与 HashRouter 的区别

1.底层原理不一样:
BrowserRouter使用的是H5的history API,不兼容IE9及以下版本。
HashRouter使用的是URL的哈希值。

2.path表现形式不一样
BrowserRouter的路径中没有#,例如:localhost:3000/demo/test
HashRouter的路径包含#,例如:localhost:3000/#/demo/test

3.刷新后对路由state参数的影响
(1).BrowserRouter没有任何影响,因为state保存在history对象中。
(2).HashRouter刷新后会导致路由state参数的丢失!!!

4.备注:HashRouter可以用于解决一些路径错误相关的问题。

更新时间: Tuesday, December 14, 2021 21:53