react-router

安装使用react-router

npm install react-router-dom --save

特点

  • 秉承react一切皆组件,路由也是组件。
  • 分布式的配置,分布在你的页面的每个角落。
  • 包含式配置,可匹配多个路由。

使用步骤

  1. 引入顶层路由组件包裹根组件,index.js
import React from 'react'
import ReactDom from 'react-dom'
import App from './App'
import { BrowserRouter } from 'react-router-dom'

ReactDom.render(
    <BrowserRouter>
    	<App></App>
    </BrowserRouter>
    , document.getElementById('root'))
  1. 引入Link组件编写路由导航
 <Link to="/">首页</Link>
  • to指定跳转去的路径
  1. 引入Route组件编写导航配置
<Route exact path="/" component={Home}></Route>
  • path配置路径
  • component 配置路径所对应的组件
  • exact 完全匹配,只有路径完全一致时才匹配
  1. 编写导航对应的component组件
  • Switch包裹,只会匹配一个,路由不匹配显示默认的组件
import React, { Component } from 'react'
import { BrowserRouter,  Route, Link, Switch } from 'react-router-dom'
import test from './router01/test'
import test01 from './router01/test01'
import test02 from './router01/test02'

function App() {
    return (
        <div>
            <ul>
                <li>
                    <Link to="/">test</Link>
                </li>
                <li>
                    <Link to="/test01">test01</Link>
                </li>
                <li>
                    <Link to="/test02">test02</Link>
                </li>
            </ul>
            <Switch>
                <Route exact path="/" component={test}></Route>
                <Route path="/test01" component={test01}></Route>
                <Route path="/test02" component={test02}></Route>
                <Route component={test}></Route>
            </Switch>
        </div>
    )
}

class RouterApp extends Component {
    render() {
        return (
            <div>
                <h1>路由测试</h1>
                <BrowserRouter>
                    <App></App>
                </BrowserRouter>
            </div>
        )
    }
}

export default RouterApp

路由的传参取参

一、声明式导航路由配置是配置路由参数(params传参)

  • 配置
   <Route path="/test/:course" component={test}></Route>
  • 传递
  <Link to="/test/参数">test</Link>
  // 或者
  this.props.history.push('/test/参数')
  • 获取
    解构路由器对象里的match
this.props.math.params.course

二、编程式导航传递参数与获取(state传参)

  • 路由上无需配置
  • 传递
  <Link to={{pathname:'test', state:{course: '参数'}}}>test</Link>
  // 或者
  this.props.location.push({pathname:'test', state:{course: '参数'}})
  • 获取:使用this.props.location.state接收参数
this.props.location.state

三、query传参

  • 路由上无需配置
  • 传递
  <Link to={{pathname:'test', query:{course: '参数'}}}>test</Link>
  // 或者
  this.props.location.push({pathname:'test', query:{course: '参数'}})
  • 获取:使用this.props.location.query接收参数
this.props.location.query

路由守卫的实现和使用

  • 路由守卫其实就是我们的路由拦截,当我们有一些页面需要登陆之后才有权限去访问这个时候,我们的路由守卫就可以派上用场了。
  • react里的路由守卫其实也是一个组件,最后返回的还是Route组件。
// 路由守卫的实现
class RouteGuard extends Component {
    state = {
        isLogin: false // 是否登录
    }

    render() {
        // 解构路由的组件和其他参数
        const { component: Component, ...otherProps } = this.props
        return (
            // 其他参数原样传回去
            // 在render判断是否有权限,有就加载原组件并把参数原样传递进去,没有权限就重定向到登录界面
            <Route
                {...otherProps}
                render={props => (this.state.isLogin ? <Component {...props}></Component> : <Redirect to="/login"></Redirect>)}
            >
            </Route>
        )
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值