ttk-app-core/src/apps/app-demo/router-example/route-params/app.js

@ttk/recat enterprise develop framework

// app.js
import React, {useState} from 'react'
import {Link, Redirect, useHistory} from '@ttk/router'
import {Button, Card} from 'antd'

export default React.memo(Page)
function Page(props) {
  const [isRedirace, setIsRedirect] = useState(false)

  // 使用url明文传参时使用location获取参数
  const location = props.location

  // 使用路由的params方式传参时使用match获取参数
  const match = props.match

  const skipDetail = () => {
    // https://github.com/ReactTraining/history/blob/v4/docs/Navigation.md 使用方法
    props.history.push({ 
      pathname: `${location.root}/layout/route-get-params`,
      search: "abc=3",
      state: {skipType: "命令跳转"}
    })
  }

  return (
    <Card
      className="ttk-card-form"
    >
      <div>
        <Button type="primary">
          <Link to={{
            pathname: `${location.root}/layout/route-get-params`,
            search: 'abc=1',
            state: {skipType: "Link组件"}
          }} >
          Link组件跳转-传参
          </Link>
        </Button>
        <pre>
          {
            JSON.stringify({
              search: 'abc=1',
              state: {skipType: "Link组件"}
            }, null, "  ")
          }
        </pre>
      </div>
      <br />
      <div>
        <Button type="danger" onClick={()=>{
            setIsRedirect(true)
          }}>Redirect组件跳转-传参
        </Button>
        <pre>
          {
            JSON.stringify({
              search: 'abc=2',
              state: {skipType: "Redirect组件"}
            }, null, "  ")
          }
        </pre>
        {
          isRedirace&&(<Redirect to={{
            pathname: `${location.root}/layout/route-get-params`,
            search: 'abc=2',
            state: {skipType: "Redirect组件"}
          }} />)
        }
        
      </div>
      <br />
      <div>
        <Button onClick={skipDetail}>命令跳转-传参</Button>
        <pre>
          {
            JSON.stringify({
              search: 'abc=3',
              state: {skipType: "命令跳转"}
            }, null, "  ")
          }
        </pre>
      </div>
    </Card>
  )
}