react-router-dom编程式路由导航

react-router-dom编程式路由导航

V5版本

1.push跳转+携带params参数

props.history.push(`/b/childl/${id}/${title}`);

2.push跳转+携带search参数

props.history.push(`/b/childl?id=${id}&title=${title}`);

3.push跳转+携带state参数

props.history.push(`/b/child`,{id,title});

4.replace跳转+携带params参数

this.props.history.replace(`/home/message/detail/${id}/${title}`)

5.replace跳转+携带search参数

this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)

6.replace跳转+携带state参数

this.props.history.replace(`/home/message/detail`,{id,title});

7.前进

this.props.history.goForward();

8.回退

this.props.history.goForward();

9.前进或回退(go)

this.props.history.go(-2);//回退到前2条的路由

在一般组件中使用编程式路由导航（费路由组件）

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

class Header extends Component {
// withRouter(Header)后，就可以在一般组件内部使用 this.props.history
}

export default withRouter(Header)

V6版本

// v6版本编程导航使用useNavigate(以下为引入代码)
import {useNavigate} from 'react-router-dom';
export default function A(){
const navigate = useNavigate();
}

1.push跳转+携带params参数

navigate(`/b/childl/${id}/${title}`);

2.push跳转+携带search参数

navigate(`/b/child2?id${id}&title=${title}`);

3.push跳转+携带state参数

navigate("/b/child2",{state:{id,title}});

4.replace跳转+携带params参数

navigate(`/b/childl/${id}/${title}`,{replace:true});

5.replace跳转+携带search参数

navigate(`/b/child2?id=${id}&title=${title}`,{replace:true});

6.replace跳转+携带state参数

navigate('/b/child2',{state:{id,title},replace:true})