一、路由的安装与引入
1、安装
npm i react-router-dom -S
2、引入
-
hash 路由: HashRouter
import { HashRouter } from 'react-router-dom'
-
history 路由: BrowserRouter
import { HistoryRouter } from 'react-router-dom'
3、提示
路由的所有配置项必须在HashRouter或者BrowserRouter包裹范围之内
二、路由的配置
以HashRouter为示例:
1、路由的显示需要依赖Route
组件
import { HashRouter, Route} from 'react-router-dom'
2、配置Route
组件的配置项
Route组件的参数:
path: 路由的匹配路径
components: 匹配成功后渲染的组件(值为组件名称)
render: 路径匹配成功后渲染的组件的render方式 (值为一个函数,返回一个组件或者标签)
exact: 完全匹配
import {React} from 'react'
//引入所需的组件,用component方式渲染
import Home from './components/home'
import Main from './components/Main'
class App extends React.Component{
render() {
return (
<HashRouter>
<Route path='/home' component={Home} exact></Route>
<Route path='/main' component={Main} exact></Route>
</HashRouter>
)
}
}
export default App
import {React} from 'react'
//引入所需的组件,用render方式渲染
import Home from './components/home'
import Main from './components/Main'
class App extends React.Component{
render() {
return (
<HashRouter>
<Route path='/home' render= {() => <Home/>} exact></Route>
<Route path='/main' render= {() => <Main/>} exact></Route>
</HashRouter> )
}
}
export default App
三、component方式与render方式的区别:
1、用component渲染页面的时候,会默认给渲染组件传递三个值:history,match,location.
render需要手动给函数加参数(也可以通过withRouter来搞定):
//传统写法
<Route path='/home' render={({history match location}) => {
return <Home history match location />
}
}>
</Route>
//解构传值
<Route path='/home' render= {(props) => <Home {...props} />}></Route>
2、render可以渲染组件,也可以渲染标签
3、render渲染的时候,可以进行传值。因为是标签,可以直接属性传值,props取值
4、一般情况下,通过render的形式路由嵌套
5、render更自由,可以进行更多的业务逻辑
四、withRouter高阶组件*
对render渲染的路由组件进行加工,使其拥有history、match、location三个参数
1、引入
import {withRouter} from 'react-router-dom'
2、使用
{{/*导出时用withRouter 对创建的组件进行加工,则组件内即可访问history,mathch,location*/}}
export default withRouter(MyComponent)
3、路由的跳转方式
常规的路由跳转有以下几种方式
(1)a标签
<a href="#/home"> 首页 </a>
<a href="#/main"> 主页</a>
(2)Link(没有选中表示的导航)
Link跳转是嵌入在react-router-dom
中的,需要引入
import {HashRouter, Route, Link} from 'react-router-dom'
//Link组件的跳转路径在to属性中
<Link to='/home'>首页</Link>
<Link to='/main'>主页</Link>
(3)NavLink(导航栏跳转,有选中标识的导航)
import {HashRouter, Route, NavLink} from 'react-router-dom'
<NavLink to='/home'>首页</NavLink>
<NavLink to='/classify'>分类</NavLink>
与Link不同的是,NavLink组件在活跃项身上会有一个类名为active
的标识
可以在active中进行相对于的样式编写:
配置项:
to:路径
activeClassName: 活跃项的类名(默认为active)
activeStyle: 活跃项的样式
4、编程式导航
如果使用this.props.history.xxx
的方式,必须要有history
参数,用component
方式渲染的页面默认有history
参数,用render
方式渲染的页面,需要手动传参。
-
(1)跳转到
this.props.history.push('/home')
-
(2)返回
this.props.history.goBack();
-
this.props.history.goForward
-
this.props.history.replace
-
this.props.history.replace
五、路由传值
1、动态路由传值(常用)
-
在定义路由的时候通过
/:属性
的方式来定义传递的属性 -
路由跳转的时候通过
{{item.name}}/:值
的方式传递数据 -
在需要接受数据的页面通过
this.props.match.params
来进行接收接收到的客户id为:{{this.props.match.params.id}}
2、query传值
-
在路由跳转的时候通过query传值的方式进行参数的传递
{{item.name}} -
在需要接收数据的页面通过
this.props.location.search
进行接收接收到的客户id:{{url.parse(this.props.location.search).query}}
3、对象形式传值
-
在路由跳转的时候通过属性对象的方式进行参数传递
{{item.name}} //query:{{id: item.id}} query名称是自己定义的名称非固定名称 -
接收
this.props.location
接收到的客户id:{{this.props.location.query.id}}
由于这种方式的传递,是将值存放在对象里,所以刷新页面后值会消失,可以用于登录返回页面路径的存储
六、路由嵌套
-
路由如果要嵌套,父级路由必须用
render
的方式来渲染,在函数内对子路由进行操作<Route path="/father" render={()=>{ return ( {/* 显示父组件 */} ) }}>
-
路由重定向--------Redirect
路由重定向是由Redirect组件来完成
import {Redirect} from 'react-router-dom'
//如果是在'/'路径,重定向到'/home'路径
-
路由的单一匹配---------Switch,完全匹配--------exact
//引入Switch组件,直接包裹在作用范围内
import {Switch} from 'react-router-dom' //用Switch组件包裹你想要作用的路由 class App extends React.Component{ render() { return( ) } }
-
完整路由嵌套
{/* 一个完整的路由嵌套 */} <Route path="/father" render={()=>( )}>
-
路由懒加载————react-loadable
使用路由的懒加载可以提高性能,增加Loading以提高用户体验等等
(1)安装
npm i react-loadable -S
(2)引入
import loadable from 'react-loadable'
(3)配置
//使用懒加载
const Home = loadable({
loader: ()=>import('./components/home'),
loading: Loading //Loading是自己的Loading组件
})
//不使用懒加载,直接引入
import Home from './components/home'