react v6 编程式导航
对于reactv6编程式导航,你了解多少?
需求:登录页登录成功如何用代码跳转到首页
我们要知道,react升到v6版本无法使用
this.props.history.push() v6版本无法使用
class Login extends React.Component {
handleLogin = () => {
//使用编程式导航实现路由跳转
//......省略其它功能和代码
//v6已经不可以用this.props.history.push();而是用的useNavigate
// this.props.history.push('/home');
const navigate =useNavigate();
navigate('/home')
}
render () {
return <div>
<p>登录页面</p>
<button onClick={this.handleLogin}>登录</button>
</div>
}
}
以为上面的代码是这个正确的,不过会报错。
一种解决方案是写一个高阶组件。
是class组件组件加强。
第二种方案是写一个函数式组件
整体代码如下
const Login = ()=> {
const navigate =useNavigate();
const handleLogin= () => {
// this.props.history.push('/home');
navigate('/home')
}
return (
<div>
<p>登录页面</p>
<button onClick={handleLogin}>登录</button>
</div>
)
}
useParams是用来存参数的。
咱们可以先从react-router-dom 结构赋值出来。
比如咱们传一个id
<Link to='/login/2'>登录</Link>
<Routes>
<Route path='/login/:id' element={<Login/>}></Route>
const navigate =useNavigate();
let {id} = useParams();
console.log(id);
useParams()导航栏能看见传的参数
useLocation 导航栏看不见传的参数
import {BrowserRouter,Link,useNavigate,useParams,useLocation } from 'react-router-dom'
console.log(state,useParams(),useLocation());
导航栏不显示。