React react-router-dom V6 的基本使用

周大胖子 · 发表于 2022-7-1 11:28:59

import React from "react";
import { BrowserRouter, HashRouter,useNavigate, Link, Route, Router, Routes, NavLink,Outlet } from "react-router-dom";
import TemJs from './temJs';
import Animationc from './animationc';
import './anmiationc.css';
import TFrom from "./tFrom";
import CssModelTest from "./cssModelTest";
import UseNav from "./useNav";
// 1.安装 npm install --save react-router-dom 注意
// 2.引入 import { BrowserRouter, HashRouter , Link ,Route } from "react-router-dom";
// BrowserRouter, HashRouter 为包裹元素 ,指定监听模式
// BrowserRouter为 history 模式; H5 新特性如果不兼容低版本建议使用
// HashRouter为hash 模式的 url 访问; 兼容低版本的时候使用
// 3.Link 控制url 跳转
// 4.Route 里面的path 用于匹配url , element 为显示的组件 [这里有个问题 component是老版本的里面的显示不一样]
// 5.V6版的react-router-dom 需要包裹一个 Routes
// 7.理解网页应用的路由使用 react-router-dom ; 安卓应用的路由使用 react-router-native
// 8. exact 表示精准匹配
// 在V6 版本中activeClassName 和activeStyle 已经从NavLinkProps中移除，可以直接在<NavLink>的className和style中使用一个函数来使用active。
{/* <NavLink className={({ isActive }) =>
isActive ? "active-menu" : undefined
} to={'/temjs'}>模板</NavLink> */}
// 9. NavLink 和 Link 本体使用差别不大，不过 NavLink可以加 className 会自动和 NavLink里的 to 想匹配
// 10 如果没有给Route 指定 path 他就和所有路由都匹配 <Route element={<TemJs />} exact />
// 11 Switch 是V5 版本的，作用是如果匹配到一个就不在继续朝下匹配[联想10 ]， V6版本后 Switch废弃， <Switch>重命名为<Routes>。
// 12. Redirect 资源重定向 V 6 废弃直接在需要跳转的页面写 <Navigate to="/login" /> 外层不需要嵌套
// 13. 嵌套路由【被引入的子路由，再别的地方引入会报错，因为子路由显示位置外层包裹的 Router 问题】
// 14. 手动跳转路由
// V5 已经废弃 [下面都是]
// 分为两种： hash 模式和正常模式如果是hash模式只需要JS 设置hash值即可 window.location.hash ='/discover/playLis
// 如果一个组件是通过【路由组件创建】出来的，那么系统会自动传递一个hash值给我们，只需要拿这个history对象，调用这个对象的push 方法修改资源地址就可以 this.props.history.push('/login/new');
// 类似APP等组件不是通过路由创建的，如果要使用 history对象，需要搭配withRouter ；写法 export default withRouter(APP); 已经废弃
// 上一条需要找个组件外面包裹 BrowserRouter类组件，用到地方都包所以-我个人觉得方法很多种这个真麻烦已经废弃
// v6 在JS种使用 useNavigate进行跳转 [但是仅限于 function 类 , class类不能用] 已经单独记录，qing'fan
// 17 使用 react-router-config 可以对路由实现统一管理
class NewRouter extends React.Component {
constructor() {
super();
this.state = {
num: 123,
aColor: '#a20ddf'
}
}
render() {
return (
<section>
<BrowserRouter>
{/* <Link activeclassname='active-menu' to={'/animationc'} >动画</Link>
<Link activeclassname='active-menu' to={'/temjs'}>模板</Link> */}
<NavLink className={({ isActive }) =>
isActive ? "active-menu" : undefined
} to={'/animationc'} >动画</NavLink>
{/* <NavLink activeclassname="active-menu" to={'/temjs'}>模板</NavLink> 这种写法已经没了 */}
<NavLink className={({ isActive }) =>
isActive ? "active-menu" : undefined
} to={'/temjs'}>模板</NavLink>
{/* <NavLink className={({ isActive }) =>
isActive ? "active-menu" : undefined
} to={'/tform'}>新闻</NavLink> */}
{/* <NavLink className={({ isActive }) =>
isActive ? "active-menu" : undefined
} to={'/login'}>登录</NavLink> */}
{/* <NavLink className={({ isActive }) =>
isActive ? "active-menu" : undefined
} to={{
pathname:'/login',
state:{
name:'2222'
}
}}>登录</NavLink> */}
<NavLink className={({ isActive }) =>
isActive ? "active-menu" : undefined
} to={'/login'} state={{ id: 999, name: "i love merlin" }} >登录</NavLink>
<Routes >
<Route path={'/animationc'} element={<Animationc />} />
<Route path={'/temjs'} element={<TemJs />} />
{/* <Route path={'/tform'} element={<TFrom />} /> */}
<Route path={'/login/*'} element={<CssModelTest />} />
{/* <Route component={Other} /> */}
</Routes>
</BrowserRouter>
<button onClick={()=>{ this.go() }}> 点击跳转链接 </button>
<UseNav></UseNav>
</section >
);
}
go(){
// const navigate = useNavigate();
// this.props.history.push('/login/new');
// useNavigate('/login/new');
// navigate('/login/new');
window.location= '/login/new';
}
}
export default NewRouter;

复制代码