react学习——23react中的路由的使用（重要）

一、路由的基本使用

javascript 复制代码

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

javascript 复制代码

 <Link className="list-group-item" to="/about">About</Link>
 <Link className="list-group-item" to="/home">Home</Link>

javascript 复制代码

{/*  注册路由组件--->  */}
<Route path={'/about'} component={About}></Route>
<Route path={'/home'} component={Home}></Route>

javascript 复制代码

 <BrowserRouter>
  <App />
</BrowserRouter>

二、路由组件与一般组件

javascript 复制代码

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

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

封装

javascript 复制代码

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

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

使用

javascript 复制代码

<MyNavLink to="/about" title="About" a={1} b={2} c={3}>About</MyNavLink>
    <MyNavLink to="/home" title="Home">Home</MyNavLink>

四、Switch的使用

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

javascript 复制代码

<Switch>
     <Route path={'/about'} component={About}></Route>
     <Route path={'/home'} component={Home}></Route>
     <Route path={'/home'} component={Test}></Route>
</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.注册子路由时要写上父路由的path值
2.路由的匹配是按照注册路由的顺序进行的

父路由

javascript 复制代码

<MyNavLink to="/about">About</MyNavLink>
<MyNavLink to="/home">Home</MyNavLink>
{/* 注册路由 */}
<Switch>
	<Route  path="/about" component={About}/>
	<Route  path="/home" component={Home}/>
	<Redirect to="/home"/>
</Switch>

子路由

javascript 复制代码

<li>
	{/*<MyNavLink to="/home/news">News</MyNavLink>*/}
	<MyNavLink to="/home/news">news</MyNavLink>
</li>
<li>
	<MyNavLink to="/home/message">Message</MyNavLink>
</li>
</ul>
{/* 注册路由 */}
<Switch>
<Route path={'/home/news'} component={News}></Route>
	<Route path={'/home/message'} component={Message}></Route>
	<Redirect to={'/home/news'}></Redirect>
</Switch>

九、向路由组件传递参数

javascript 复制代码

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

javascript 复制代码

import React, { Component } from 'react'
import {Link,Route} from "react-router-dom";
import Detail from "./Detail";

export default class Message extends Component {
	state = {
		messageArr:[
			{id:1,title:'001'},
			{id:2,title:'002'},
			{id:3,title:'003'}
		]
	}
	render() {

		const {messageArr} = this.state
		return (
			<div>
				<ul>
					{
						messageArr.map(item=>{
							return <li key={item.id}>
								{/*向路由组件传递params参数*/}
								{/*<Link to={`/home/message/detail/${item.id}/${item.title}`}>{item.title}</Link>&nbsp;&nbsp;*/}
								{/*向路由组件传递search参数*/}
								{/*<Link to={`/home/message/detail/?id=${item.id}&title=${item.title}`}>{item.title}</Link>*/}
								{/*向路由组件传递state参数*/}
								<Link to={
									{pathname:'/home/message/detail',
										state:{
										id:item.id,
											title:item.title}
									}}>{item.title}</Link>
								&nbsp;&nbsp;
							</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>
		)
	}
}

javascript 复制代码

import React, {Component} from "react";
// import qs from 'qs'
const DetailData=[
    {
        id:1,
        content:'content1'
    },
    {
        id:2,
        content:'content2'
    },
    {
        id:3,
        content:'content3'
    }
]
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(item=>item.id===Number(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()

javascript 复制代码

replaceShow = (id,title)=>{
		console.log(id,title)
		//replace跳转+携带params参数
		// this.props.history.replace(`/home/message/detail/${id}/${title}`)

		//replace跳转+携带search参数
		// this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)

		//replace跳转+携带state参数
		this.props.history.replace(`/home/message/detail?`,{id,title})
	}

	pushShow(id, title) {
		//push跳转+携带params参数
		// this.props.history.push(`/home/message/detail/${id}/${title}`)

		//push跳转+携带search参数
		//this.props.history.push(`/home/message/detail?id=${id}&title=${title}`)

		//push跳转+携带state参数
		this.props.history.push(`/home/message/detail?`,{id,title})
	}

	goback=()=> {
		this.props.history.goBack()
	}

	goforward=() =>{
		this.props.history.goForward()
	}

	goTest = () => {
		this.props.history.go(2)
	}

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