前端路由（七）-编程式导航——通过js方法实现路由跳转 & 获取编程式导航传递的参数-props.location.state & 如果组件不是路由组件-必须使用withRouter包裹原始的组件

编程式导航——通过js方法实现路由跳转 & 获取编程式导航传递的参数-props.location.state & 如果组件不是路由组件-必须使用withRouter包裹原始的组件

• 通过js动态控制路由跳转

  • 导入withRouter

  import { withRouter } from "react-router-dom";
  

  • 导出时使用withRouter包裹组件

  export default withRouter(Login);
  

  • 被包裹的组件中可以通过props获取history对象

  let { history } = this.props
  

  • 然后可以使用history对象调用push方法进行跳转

  history.push('/home', {uname: 'lisi'})
  

  • 登录组件

  class Login extends React.Component {
    constructor(props) {
      super(props);
    }
    handle = () => {
      const {history} = this.props;
      history.push('/home', {info: 'hello'});
    }
    render() {
      return (
        <div>
          <div>登录页面</div>
        <div>
            用户名：<input type="text"/>
            密码：<input type="text"/>
          </div>
          <div>
            <button onClick={this.handle}>登录</button>
          </div>
        </div>
      );
    }
  }
  

实例

第一步：安装依赖包

npm install react-router-dom -D

第二步：在APP.js同层级的component下新建router文件夹，其下新建文件06-编程式导航.js

第三步：在App.js中进行导入

import React from 'react';
import BaseRouter from './component/router/06-编程式导航'

function App () {
  return (
    <div>
      <BaseRouter/>
    </div>
  )
}

export default App;

component/router/06-编程式导航.js文件如下

/*
  编程式导航：通过js方法实现路由跳转
*/
import React from 'react'
import { BrowserRouter, Route, Link, withRouter } from 'react-router-dom'

class Login extends React.Component {
  handleLogin = () => {
    // 控制表单的登录
    console.log(this.props)
    console.log(this.props.history.push)
    // 可以使用props.history.push实现路由跳转
    this.props.history.push('/home', {
      info: 'nihao'
    })
    // console.log(this.props)
  }
  render () {
    return (
      <div>
        <div>登录页面</div>
        <div>
          用户名： 
          <input type="text" />
        </div>
        <div>
          密码： 
          <input type="text" />
        </div>
        <div>
          <button onClick={this.handleLogin}>提交</button>
        </div>
      </div>
    )
  }
}

function Home (props) {
  console.log(props)
  console.log(props.location.state)
  // 如何获取编程式导航传递的参数？
  // props.location.state
  let param = props.location.state
  return <div>Home:{param && param.info}</div>
}

// withRouter可以向Login组件中注入路由相关属性
// 如果组件不是路由组件，必须使用withRouter包裹原始的组件
const MyLogin = withRouter(Login)
class TestLogin extends React.Component {
  render () {
    return (
      <div>
        <MyLogin/>
      </div>
    )
  }
}

class TestRouter extends React.Component {
  render () {
    return (
      <BrowserRouter>
        <div>
          <div>测试编程式导航</div>
          <Link to='/login'>登录</Link>
          <br></br>
          <Link to='/testlogin'>TestLogin</Link>
          <br></br>
          <Link to='/home'>主页</Link>
          <hr></hr>
          <Route path='/login' component={Login}/>
          <Route path='/testlogin' component={TestLogin}/>
          <Route path='/home' component={Home}/>
        </div>
      </BrowserRouter>
    )
  }
}

export default TestRouter

npm run start启动项目，页面如下：

标签：编程,withRouter,props,组件,路由,history
来源： https://blog.csdn.net/weixin_44867717/article/details/113818953