路由及reactreact如何跳转路由器

参考资料: 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’

// 定义Route2-1 通过component的方式引用组件 2-2 通过render方式引用组件 }>

3. 路由参数传递

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

?代表可选参数的意思, 传不传递都可以

第二种: 通过 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"}

4. router-link Object

mine

5. 重定向

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

import {Redirect} from 'react-router-dom'

6. 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 ( Mine: id-{props.match.params.id} push-回到首页 replace-回到首页 )}export default Mine

7. 高阶组件withRouter使用

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

import React from 'react'import {withRouter} from 'react-router-dom'class MineDemo extends React.Component { click() { console.log(this.props) } render() { return ( click ) }}export default withRouter(MineDemo)// 结果: {history: {…}, location: {…}, match: {…}, staticContext: undefined}

8. 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 (

name: this.setState({name: e.target.value}) } /> ) }}