react路由

1.什么是路由

根据不同的地址，web服务器处理不同的业务以及逻辑。

2.准备工作

安装react-router-dom
npm add react-router-dom --save

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

在原生中靠< a>标签跳转不同的页面
在React中靠路由链接实现切换组件–编写路由链接

路由router分为两种 BrowserRouter HashRouter
整个项目中要确定一个路由模式，用一个路由器包裹

3.路由模式

分为history模式和hash模式

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

4.简单实现路由

先以BrowserRouter为例
在项目index.js中

// 确定路由模式 按需引入 BrowserRouter或者HashRouter
import {BrowserRouter} from 'react-router-dom'
//引入App
import App from './App'

ReactDOM.render(
// 全局包裹
	<BrowserRouter>
		<App/>
	</BrowserRouter>,
	document.getElementById('root')
)

在App主页面中
引入 引入路由链接Link 和
import {Link,Route} from ‘react-router-dom’

// 侧边 导航栏
// 在React中靠路由链接实现切换组件--编写路由链接
<Link className="list-group-item" to="/about">About</Link>
<Link className="list-group-item" to="/home">Home</Link>

// 中心主页面
<div className="panel-body">
	{/* 注册路由 */}
	<Route path="/about" component={About}/>
	<Route path="/home" component={Home}/>
/div>

这样就实现一个简单的路由，完成页面跳转。但并不是很完美，咱们接着往下看

5.路由组件

一般react项目会在根目录下新建page文件夹，里面专门写路由组件

路由组件与一般组件
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"

6.NavLink与封装NavLink

NavLink

将路由链接换做 NavLink中有一个属性activeClassName=“XXX” 它可以实现点击哪个路由链接哪个具有XXX的样式
NavLink可以实现路由链接的高亮，通过activeClassName指定样式名

<NavLink activeClassName="自定义样式"/>

为什么要封装NavLink

如果项目中有很多路由链接 会重复写很多一样的相同代码
比如下列代码：

<NavLink activeClassName="自定义样式"  to="/home"/>
<NavLink activeClassName="自定义样式"  to="/about"/>
<NavLink activeClassName="自定义样式"  to="/user"/>

封装NavLink

在component里新建MyNavLink文件

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

export default class MyNavLink extends Component {
	render() {
		// console.log(this.props);
		// this.props 可以拿到标签体和标签内容
		return (
			<NavLink activeClassName="高亮样式" className="公共样式" {...this.props}/>
		)
	}
}

在App中只需要将路由链接替换自己封装的

// 引入封装的组件
import MyNavLink from './components/MyNavLink'
// 此处必须双标签闭合标签写法 ，不然About/Home需要用通过props传值
<MyNavLink to="/about">About</MyNavLink>
<MyNavLink to="/home">Home</MyNavLink>

7.Switch的使用

1.通常情况下，path和component是一一对应的关系。
2.Switch可以提高路由匹配效率(单一匹配)。使用后当匹配后就不继续往下进行匹配

使用：

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

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

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

9.路由重定向

Redirect的使用

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

2.具体编码：

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

10.嵌套路由 （二级以上路由）

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

以home组件中嵌套其他组件并且进行路由跳转为例

import React, { Component } from 'react'
import MyNavLink from '../../components/MyNavLink'
import {Route,Switch,Redirect} from 'react-router-dom'
import News from './News'
import Message from './Message'

export default class Home extends Component {
   render() {
	 return (
	   <div>
		 <h3>我是Home的内容</h3>
		 <div>
			<ul className="nav nav-tabs">
			  <li>
				 <MyNavLink to="/home/news">News</MyNavLink>
			  </li>
			  <li>
				 <MyNavLink to="/home/message">Message</MyNavLink>
			  </li>
			 </ul>
			 {/* 注册路由 */}
			 <Switch>
				<Route path="/home/news" component={News}/>
				<Route path="/home/message" component={Message}/>
				<Redirect to="/home/news"/>
			 </Switch>
		 </div>
	 </div>
	)
  }
}

11.路由组件传递参数

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’ 
		 使用 qs.parse(this.props.location.search)   
3.state参数
	路由链接(携带参数)：<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
	注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
	接收参数：this.props.location.state
	备注：刷新也可以保留住参数

12.路由跳转模式

push(叠加) 和 replace(替换栈最上层)
默认push
若开起replace模式 在路由链接上 加 replace

<Link replace to='/home'}}>home</Link>

13.编程式路由导航

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

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

14.withRouter

withRouter可以加工一般组件，让一般组件具备路由组件所特有的API，可以使用跳转、前进、后退
withRouter的返回值是一个新组件
用法 ：
导出一般组件时 加上withRouter（）方法 参数为组件名，返回新组件
class Header extends Component {}
export default withRouter(Header)

15.路由懒加载

1.引入lazy函数和内置组件

import React, { lazy, Suspense } from “react”;

2.用自定义变量形式引入路由组件
之前写法：import Home from ‘./Home ’
懒加载写法：const Home = lazy(() => import(’./Home’))

重定向路由 或者等待加载的组件，这种组件可不能懒加载
import Loading from ‘./Loading’

3.在注册路由的地方用Suspense组件包裹起来

<Suspense fallback={<Loading>}>
	<Route path="/about" component={About}></Route>
</Suspense>

好了以上就是关于react 中路由的整理