记录一些React路由的笔记

320 阅读3分钟

React 路由

路由的基本使用

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"

NavLink 与封装 NavLink

NavLink可以实现路由链接的高亮,通过activeClassName指定样式名

Switch 的使用

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

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

1.public/index.html 中 引入样式时不写 ./ 写 / (常用)
2.public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% (常用)
3.使用HashRouter

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

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

Redirect的使用

1.一般写在所有路由注册的最下方,当所有路由都无法匹配时,跳转到Redirect指定的路由
2.具体编码:
<Switch>
    <Route path="/about" component={About}/>
    <Route path="/home" component={Home}/>
    <Redirect to="/about"/>
</Switch>

嵌套路由

1.注册子路由时要写上父路由的path2.路由的匹配是按照注册路由的顺序进行的

向路由组件传递参数

1.params参数
    路由链接(携带参数):<Link to='/demo/test/tom/18'}>详情</Link>
    注册路由(声明接收):<Route path="/demo/test/:name/:age" component={Test}/>
    接收参数:this.props.match.params
2.search参数
    路由链接(携带参数):<Link to='/demo/test?name=tom&age=18'}>详情</Link>
    注册路由(无需声明,正常注册即可):<Route path="/demo/test" component={Test}/>
    接收参数:this.props.location.search
    备注:获取到的search是urlencoded编码字符串,需要借助querystring解析
    querystring的使用:
    import qs from 'querystring';
	其中比较常用的两个方法:
    1. qs.stringify({id: 1, name: '略略略'});		//把一个对象转换为url编码
	2. qs.parse('id=1&name=略略略');				//把一个url编码转换为对象
3.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()

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可以用于解决一些路径错误相关的问题。

antd 的按需引入+自定主题

		1.安装依赖:yarn add react-app-rewired customize-cra babel-plugin-import less less-loader
		2.修改package.json
				....
					"scripts": {
						"start": "react-app-rewired start",
						"build": "react-app-rewired build",
						"test": "react-app-rewired test",
						"eject": "react-scripts eject"
					},
				....
		3.根目录下创建config-overrides.js
				//配置具体的修改规则
				const { override, fixBabelImports,addLessLoader} = require('customize-cra');
				module.exports = override(
					fixBabelImports('import', {
						libraryName: 'antd',
						libraryDirectory: 'es',
						style: true,
					}),
					addLessLoader({
						lessOptions:{
							javascriptEnabled: true,
							modifyVars: { '@primary-color': 'green' },
						}
					}),
				);
			4.备注:不用在组件里亲自引入样式了,即:import 'antd/dist/antd.css'应该删掉

路由在代码中的使用

index.js

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

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById('root')
);
//BrowserRouter 包裹全部的内容

其他组件中使用

<div>
    <!-- 
    	两种方式二选一
		NavLink:点击后有调用activeClassName,能添加类样式,默认添加active类样式
		Link:普普通通的
    -->
	<NavLink activeClassName="active" className="style-class" to='/about'>About</NavLink>
    <Link className="style-class" to='/about'>About</NavLink>
    
    <!-- 如果有多个路由,可以用Switch,匹配到第一个路由后就不会往下继续匹配 -->
    <Switch>
        <Route path="/about" component={About}/>
        <Route path="/home" component={Home}/>
        <!-- Redirect作用是如果上面路由都没有匹配就默认跳转到 /about -->
        <Redirect to="/about"/>
    </Switch>
</div>

<!-- 路由嵌套 - home路由组件中再次配置 -->
<Link to="/home/list">点我进入List</Link>
<Route path="/home/list" component={List} />