网站导航
> 文章列表 > 详细介绍React路由

详细介绍React路由

网友: 文章列表 2024-03-21 23:00:45

详细介绍React路由

路由

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

一个路由就是一个映射关系(key:value)，key为路径, value可能是function或component。
后端路由：

  1. 理解：value是function, 用来处理客户端提交的请求。
  2. 注册路由： router.get(path, function(req, res))
  3. 工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据

前端路由：

  1. 浏览器端路由，value是component，用于展示页面内容。
  2. 注册路由: <Route path="/test" component={Test}>
  3. 工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

React路由

react-router-dom是react的一个插件库，专门用来实现一个SPA应用，基于react的项目基本都会用到此库。使用命令npm i react-router-dom下载。
相关API：内置组件：

1.	<BrowserRouter>
2.	<HashRouter>
3.	<Route>
4.	<Redirect>
5.	<Link>
6.	<NavLink>
7.	<Switch>

v6新版本改动

在版本为6的react-router和react-router-dom的使用中，与旧版有一点差别。

  • Switch变为Routes，所有的Route组件都应该被Routes包裹，在Routes组件外使用Route将报错。
  • Redirect变为Navigate，Navigate组件不能写在Routes中，否则也会报错，也就是Routes组件只接收Route作为其子组件。
  • v6移出了WithRouter，添加了一些新的hooks。

相关文章1
相关文章2

路由的基本使用

//App.jsximport React, { Component } from 'react'
import {Link,Route} from 'react-router-dom'
import Home from './components/Home'
import About from './components/About'
export default class App extends Component {render() {return (<div>{/* 原生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 to="/about">About</Link><Link to="/home">Home</Link>{/* 注册路由，进行路径的匹配 */}<Route path="/about" component={About}/><Route path="/home" component={Home}/></div>)}
}

//index.js
import React from 'react'
import ReactDOM from 'react-dom'
import {BrowserRouter} from 'react-router-dom'
import App from './App'
//<App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>
ReactDOM.render(<BrowserRouter><App/></BrowserRouter>,document.getElementById('root')
)

详细介绍React路由

路由组件与一般组件

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和Switch

NavLink ：
<Link to="/about">About</Link>的升级版：
<NavLink activeClassName="zagiee" to="/about">About</NavLink>可以多传一个属性，activeClassName，点击当前可以加一个类名，添加一些样式,shi。

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

当有多个path相同的情况，不用Switch包的话匹配到home时，第一个匹配了还会往下继续匹配，第二个也会匹配，从而两个都展示，包住后匹配到第一个后就不往下匹配了，从而只显示第一个。

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

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

当路径是多级时，刷新页面可能会造成样式丢失问题。

<Link to="/zagiee/home">Home</Link>
<Route path="/zagiee/home" component={Home}/>

解决方法：
1.public/index.html 中 引入样式时不写 ./ 写 / （常用）
2.public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% （常用）
3.使用HashRouter（不常用）

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

1.默认使用的是模糊匹配（输入的路径to必须包含要匹配的路径paath，且顺序要一致）。
2.开启严格匹配：<Route exact={true} path="/about" component={About}/>，简写：<Route exact path="/about" component={About}/>
3.严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由
4.一般path=”/"这个路由一般会加上exact，否则它也会匹配’/home’导致这个路由就没用了。
另外嵌套路由不要加exact属性，如果父级路由加上，他下面的子路由将不会生效，因为外层强制匹配了

向路由组件传递参数

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
备注：刷新也可以保留住参数，前两个也可以。

//Message/index.jsxstate = {messageArr:[{id:'01',title:'消息1'},{id:'02',title:'消息2'},{id:'03',title:'消息3'},]}
render() {const {messageArr} = this.statereturn (<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参数，双括号是对象，单括号是js模板字符串，前两种也能写成对象形式 */}<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>

//Message/Detail/index.jsx
import React, { Component } from 'react'
// import qs from 'qs'const DetailData = [{id:'01',content:'你好，中国'},{id:'02',content:'你好，尚硅谷'},{id:'03',content:'你好，未来的自己'}
]
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参数,加 || {}是为了防止报错，有值就用，没值就undefinedconst {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>)}
}

push和replace

push：当前看到的是栈顶地址，点击回退会出栈然后回到上一个页面（message）。
详细介绍React路由

replace是用它替换栈顶地址，回退会回到news。

<Link replace to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>

详细介绍React路由

编程式路由导航

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

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

export default class Message extends Component {state = {messageArr:[{id:'01',title:'消息1'},{id:'02',title:'消息2'},{id:'03',title:'消息3'},]}replaceShow = (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})}back = ()=>{this.props.history.goBack()}forward = ()=>{this.props.history.goForward()}go = ()=>{this.props.history.go(-2)}render() {const {messageArr} = this.statereturn (<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>&nbsp;<button onClick={()=> this.pushShow(msgObj.id,msgObj.title)}>push查看</button>&nbsp;<button onClick={()=> this.replaceShow(msgObj.id,msgObj.title)}>replace查看</button></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}/><button onClick={this.back}>回退</button>&nbsp;<button onClick={this.forward}>前进</button>&nbsp;<button onClick={this.go}>go</button></div>)}
}

withRouter

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

//一般组件Header/index.jsx
import {withRouter} from 'react-router-dom'
class Header extends Component {……
}
export default withRouter(Header)

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

网络标签：

相关问题