React Router

66 阅读4分钟

一、路由的安装与引入

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'