react v6 编程式导航

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());

导航栏不显示。