react中不是经过路由渲染的组件获取路由参数

1. 使用高阶组件~withRouter ~

withRouter是react-router的一个高阶组件，可获取history

render时会把match, location和history传入props

react中经过路由渲染的组件才拥有路由参数，使用this.props.history.push('/a')跳转到对应路由的页面

使用withRouter可以将路由参数传入this.props中  函数组件直接拿取

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

function NavBar({ children, rightContent ，history}) {
	const back = () => {
		history.go(-1)
	}
    return (
        <div className={styles.root}>
            {/* 后退按钮 */}
            <div className="left" onClick={back}>
                <Icon type="iconfanhui" />
            </div>
            {/* 居中标题 */}
            <div className="title">{children}</div>

            {/* 右侧内容 */}
            <div className="right">{rightContent}</div>
        </div>
    )
}

export default  withRouter(NavBar)

2. 使用Hooks

import { useHistory } from 'react-router'
// 路由 提供了几个和路由相关的hook 
// useHistory useLocation useParams
export default  function NavBar({ children, rightContent }) {
    const history = useHistory()
    const back = () => {
        history.goBack()
    }
    return (
        <div className={styles.root}>
            {/* 后退按钮 */}
            <div className="left" onClick={back}>
                <Icon type="iconfanhui" />
            </div>
            {/* 居中标题 */}
            <div className="title">{children}</div>

            {/* 右侧内容 */}
            <div className="right">{rightContent}</div>
        </div>
    )
}