React 使用 JS 跳转页面问题

周大胖子 · 发表于 2022-6-30 16:15:14

前提：我谈的这个JS跳转主要是React  17+  , 且react-router-dom  v6 【5不能用天差地别】

教学视频是v5 啥玩意都用不上，一脸无奈还得自己探索

都需要引入：import { BrowserRouter, HashRouter, useNavigate , Link, Route, Router, Routes, NavLink ,Navigate} from "react-router-dom"; 跳转都需要用到  useNavigate

分类1  ：函数组件

export default function CssModelTest(){

      const navigate = useNavigate()

      function handleClick () {
         navigate('/login/res')
      }
      return (
         <>
         <div onClick={()=>{handleClick()}}>Login123</div>
                     <h1>这是登录页</h1>
         <section className={CssModelTestStyle.home}> 这是CssModelTest的组件 111</section>

         <NavLink to={'/login/old'} >老用户登录</NavLink>
         <NavLink to={'/login/new'}>新用户登录</NavLink>
         <NavLink to={'/login/res'}>注册</NavLink>

         <Routes >
            <Route path={'/'} element={<LoginOld />}  />
            <Route path={'old'} element={<LoginOld />}  />
            <Route path={'new'} element={<LoginNew />}  />
            <Route path={'res'} element={<LoginRes />}  />
         </Routes>
         </>
      )
}

分类2  ：  类组件 [这个就很坑,注意最后的抛出]

export const withNavigation = (PureComponent) => {
return (props) => <PureComponent {...props} navigate={useNavigate()} />;
};
class CssModelTest extends React.PureComponent{
render(){
return(
<>
<h1>这是登录页</h1>
<NavLink to={'/login/old'} >老用户登录</NavLink>
<NavLink to={'/login/new/:16/:t'}>新用户登录</NavLink>
<NavLink to={'/login/res'}>注册</NavLink>
<button onClick={()=>{
this.gowhere()
}}> 走吧 </button>
<Routes >
<Route path={'/'} element={<LoginOld />} />
<Route path={'old'} element={<LoginOld />} />
<Route path={'new/:age/:name'} element={<LoginNew />} />
<Route path={'res'} element={<LoginRes />} />
</Routes>
</>
)
}
gowhere(){
this.props.navigate('/login/new');
}
}
export default withNavigation(CssModelTest);

复制代码