现在我们来搞一搞React中的路由吧,别问我为什么这木喜欢用搞这个字,因为它比较深奥。
重难点:
1:如何安装react-router-dom
2:路由传值,如何传值
3:路由嵌套 路由跳转
4:路由传参 获取参数
一:React 路由介绍
1.1单页面应用
单页面得特点:只需要加载一次主页面,通过局部刷新,就可以实现跳转或者切换页面
优点:加载速度快,用户体验比较好
缺点:
- 第一次加载比传统要慢一点
- 不利seo
- 页面相对复杂
- 返回键
1.2 安装react-router-dom
*要注意:以下所有操作均运行在搭好的React环境中
cnpm install react-router-dom -S
二:路由的内置组件
引入内置组件
- HashRouter表示一个路由的根容器,将来所有的路由相关的东西,都要包裹在HashRouter里面,而且一个网站中,只需要使用一次HashRouter就好了;
- Route表示一个路由规则,在Route上,有两个比较重要的属性,path,component
- Link表示一个路由的链接
代码示例如下:
import {HashRouter,Route,Link} from 'react-router-dom'
引入路由,链接,代码示例如下:
import React from 'react';
//引入内置文件
import {HashRouter,Route,Link} from 'react-router-dom';
//引入三个子组件
import Home from './Home'
import About from './About'
import News from './News'
//声明一个类组件
class App extends React.Component{
//重新渲染页面
render(){
return(
// 根容器
<HashRouter>
<div>
<h2>我想吃肉</h2>
<hr />
{/* 链接 */}
<Link to='/Home'>首页</Link>
<Link to='/About'>关于</Link>
<Link to='/News'>新闻</Link>
//路由跳转到相应页面 这里面的path指的是路径 component是指向某个组件
<Route path='/Home' component={Home}></Route>
<Route path='/About' component={About}></Route>
<Route path='/News' component={News}></Route>
</div>
</HashRouter>
)}
}
//向外暴露
export default App;
三:BrowserRouter 和 HashRouter的区别
3.1 BrowserRouter:h5路由(history API)
- 在开发过程中使用是没有问题的,但是将页面上传至服务器之后,问题就来了:用户访问的资源不存在,页面是空白的。 经过排查怀疑是路径的问题,将BrowserRouter 改为 HashRouter之后,问题解决了~
3.2 HashRouter:哈希路由
- hashHistory 使用 URL 中的 hash(#)部分去创建路由
四:嵌套路由
下面给大家看一个二级路由跳转的代码 希望能给你带来帮助
4.1 入口文件 代码示例:
import React from 'react';
//先引入要用到的路由 链接
import {HashRouter,Route,Link} from 'react-router-dom';
import News from './News'
//声明一个类组件
class App extends React.Component{
//从新渲染页面
render(){
return(
// 根容器
<HashRouter>
<div>
<h2>我想吃肉</h2>
<hr />
{/* 链接 */}
<Link to='/News'>新闻</Link>
<Route path='/News' component={News}></Route>
</div>
</HashRouter>
)}
}
//向外暴露
export default App;
4.2 一级路由 代码示例:
//引入要用到的路由 链接
import React from 'react';
import Pig from './news/pig'
import {Route,Link} from 'react-router-dom';
//声明一个类组件
class News extends React.Component
{
//重新渲染页面
render(){
return(
<div>
//link里面的to指的是去某个页面
<Link to='/news/pig'>你怕是个憨憨</Link>
//在这里的陆晶晶跳转的是news里面的pig组件
<Route path='/news/pig' component={Pig}></Route>
</div>
)
}
}
//向外暴露
export default News;
4.3 二级路由 代码示例:
代码示例如下:
import React from 'react';
//声明一个类组件
class pig extends React.Component{
//重新渲染页面
render(){
return(
<div>哈哈哈哈哈</div>
)
}
}
//向外暴露
export default pig;
五:路由传参和获取参数
传参方式有四种,下面给大家示范一下
5.1 params
<Route path='/path/:name' component={Path}/>
<link to="/path/2">xxx</Link>
this.props.history.push({pathname:"/path/" + name});
//读取参数用:this.props.match.params.name
5.2.query
<Route path='/query' component={Query}/>
<Link to={{ path : ' /query' , query : { name : 'sunny' }}}>
this.props.history.push({pathname:"/query",query: { name : 'sunny' }});
//读取参数用: this.props.location.query.name
5.3.state
<Route path='/sort ' component={Sort}/>
<Link to={{ path : ' /sort ' , state : { name : 'sunny' }}}>
this.props.history.push({pathname:"/sort ",state : { name : 'sunny' }});
//读取参数用: this.props.location.query.state
5.4.search
<Route path='/web/departManange ' component={DepartManange}/>
<link to="web/departManange?tenantId=12121212">xxx</Link>
this.props.history.push({pathname:"/web/departManange?tenantId" + row.tenantId});
//读取参数用: this.props.location.search
**今天的分享就到这里了,还是那句话,欢迎大家随时补充~嘻嘻嘻