有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

react router dom(路由及react-router-dom)使用详解

前端框架 炮渣日记 3周前 (11-18) 14次浏览 已收录 0个评论 扫描二维码
参考资料:
https://reacttraining.com/react-router/web/api

  1. npm install –save react-router-dom
  2. 引入 import {BroswerRouter as Router, Route, Switch, Link} from ‘react-router-dom’
// 定义Route
2-1 通过component的方式引用组件
 <Route strict exact path="/" component={Home}></Route>

2-2 通过render方式引用组件
 <Route path="/demo" render={ (props) => <Demo {...props} title="hello"/> }></Route>
  1. 路由参数传递

第一种: 通过路径传递参数, 通过 props.match.params.key 获取参数

 ?代表可选参数的意思, 传不传递都可以
 <Route strict exact path="/mine/:id?" component={Mine}></Route>

第二种: 通过 new URLSearchParams(props.localtion.search).get(key) 获取参数

const params = new URLSearchParams(props.location.search)
const name = params.get('name')
console.log(name)

第三种: 通过querystring传递参数

const qs = require('querystring')

const params = qs.parse(props.location.search)
console.log(params)

// 输出结果: 前面有个问号需要自己处理
// {?name: "mystic", age: "123"}
  1. router-link Object
<NavLink exact to={{
    pathname: 'mine',
    search: '?sort=name',
    hash: '#the-hash',
    state: {
        flag: true
    }
}} >mine</NavLink>
  1. 重定向

Redirect使用场景: 注册登录跳转首页 基本使用

import {Redirect} from 'react-router-dom'
<Redirect from="/hello" to="/mine"></Redirect>
  1. push和replace

push: 叠加路径, 可以返回 replace: 替代路径

import React from 'react'

const Mine = (props) => {
    console.log(props)

   const back = () => {
       props.history.push('/')
   }

   const replaceBack = () => {
        props.history.replace('/')
   }

    return (
        <div>
            Mine: id-{props.match.params.id}
            <button onClick={back}>push-回到首页</button>
            <button onClick={replaceBack}>replace-回到首页</button>
        </div>
    )
}

export default Mine
  1. 高阶组件withRouter使用

作用: 可以让一个没有被路由对象管理组件拥有路由对象

import React from 'react'
import {withRouter} from 'react-router-dom'

class MineDemo extends React.Component {

    click() {
        console.log(this.props)
    }

    render() {
        return (
            <div>
                <button onClick={this.click.bind(this)}>click</button>
            </div>
        )
    }
}

export default withRouter(MineDemo)

// 结果: {history: {…}, location: {…}, match: {…}, staticContext: undefined}
  1. Prompt组件

应用场景: 在输入框存在内容进行页面跳转的时候, 会给用户一个是否确认离开的提示, 避免错误操作 两个参数:

when: boolean 
message: 提示信息
import React from 'react'
import {Redirect, Prompt} from 'react-router-dom'

export default class Demo extends React.Component {
   constructor(props) {
       super(props)
       this.state = {
           name: ""
       }
   } 

   render() {
       return (
           <div>
               <Prompt
                    when= { !!this.state.name }
                    message = { '确定要离开吗' }
               />
               name:<input type="text" value={this.state.name} onChange={ e => this.setState({name: e.target.value}) } />
           </div>
       )
   }
}
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址