关于React中路由(router)介绍

现在我们来搞一搞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>&nbsp;&nbsp;
<Link to='/About'>关于</Link>&nbsp;&nbsp;

<Link to='/News'>新闻</Link>&nbsp;&nbsp;
//路由跳转到相应页面  这里面的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>&nbsp;&nbsp;
<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

**今天的分享就到这里了，还是那句话，欢迎大家随时补充~嘻嘻嘻