免费网站入口2021,阿里巴巴采购网,欧美设计网站,陶艺品网站模板1.路由安装(默认安装最新版本6.15.0) npm i react-router-dom 2.路由模式
有常用两种路由模式可选#xff1a;HashRouter 和 BrowserRouter。
①HashRouter#xff1a;URL中采用的是hash(#)部分去创建路由。
②BrowserRouter#xff1a;URL采用真实的URL资源#xff0c;…1.路由安装(默认安装最新版本6.15.0) npm i react-router-dom 2.路由模式
有常用两种路由模式可选HashRouter 和 BrowserRouter。
①HashRouterURL中采用的是hash(#)部分去创建路由。
②BrowserRouterURL采用真实的URL资源无#。
3.常用路由组件和hooks 注意
v5版本路由是模糊匹配需加关键字exact和Switch实现精准匹配。
v6版本路由算法改变默认就是精确匹配匹配完整路径如果想匹配某一部分在路径后加/*
例如
Route path/home/:id element{Home /}/
则匹配
path /home/123
path/home/abc
Route path/citylist/* element{CityList /}/
则匹配
path/citylist
path/citylist/123/abc
在v6中Route能够找到最优路径并不需要像v5讲究先后顺序。
4.Link/NavLink/类似于a标签
老版本v5中NavLink可以设置激活状态时的样式他有一个activeClassName或activeStyle。
新版本v6中NavLink可以移除了老版本activeClassName或activeStyle他有一个箭头函数接收isActive,Link/可以跳转但是不能使用以下方式激活样式
import React from react
import ./App.css
import {NavLink}from react-router-domfunction App() {return (div classNameApp
{/* 自动会传入isActive,要解构出来,判断是否选中如果选中追加样式*/}
NavLink className{({isActive})isActive?active:} to/citylist去城市列表/NavLink
NavLink className{({isActive})isActive?active:} to/home去首页/NavLink//style书写方式
NavLink style{({isActive}){
return {
color:isActive?red:black
}
} to/home去首页/NavLink/div);
}export default App;
效果如下 5.新老版本重定向
老版本Redirect to/login /
新版本使用Navigate 进行重定向Route path/ element{Navigate to/home //,相当于push会有历史记录如果Route path/ replace element{Navigate to/home //使用replace,无历史记录。
6.路由出口与占位(Outlet/)不做过多赘述。
7.useRoutes声明式的路由
①.index.js文件引入并使用
import React from react;
import ReactDOM from react-dom/client;
// import ./index.css;import App from ./App;
// 1.引入BrowserRouter路由模式
import {BrowserRouter } from react-router-domconst root ReactDOM.createRoot(document.getElementById(root));
root.render(React.StrictMode{/* 2.使用 */}BrowserRouter App //BrowserRouter /React.StrictMode
);
②router-index.js文件
const OutRoutes(){const routesuseRoutes([{path:/home,element:Home/,// home组件内使用Outlet添加出口,以显示子组件内容,// 注意:子组件不需加绝对路径/,否则会报错,使用相对路径children:[{path:detail,element:Detail/}] },{path:/citylist,element:CityList/},
//* 404页面匹配不符合路径{path:*,element:NotFound/}])return routes
}export default OutRoutes
③App.js文件 import React, { Suspense } from react
import IndexRouter from ./router
function App() {return (div classNameApp{/* 使用路由懒加载,渲染页面的时候可能会有延迟但使用了Suspense之后可优化交互。 */}{/* 注意IndexRouter/IndexRouter要用标签的形式,因为他是组件 */}SuspenseIndexRouter/IndexRouter/Suspense/div);
}export default App;
8.编程式的路由
老版本
类组件this.props.history.push(/home)
函数组件useHistory()
新版本
useNavigate()
import React from react
import { Link,useNavigate } from react-router-domexport default function CityList() {const naviate useNavigate();const jump(){naviate(/home/detail);//push的方式// naviate(/home/detail,{replace:true})replace方式}return (div城市列表Link to/home去home页面/Linkbutton onClick{()jump()}跳转/button /div)
}
9.路由跳转参数携带以及获取路由参数的三种方式
// push跳转的三种携带参数方式
// 1.携带params参数
Navigate(/home/c1/${id}/${title}) useParams()
//2.携带search参数
Navigate(/home/c1?id${id}title${title}) useSearchParams()
//3.携带state参数
Navigate(/home/c1,{state:{id,title}}) useLocation()//replace跳转的三种携带参数方式
// 1.携带params参数
Navigate(/home/c1/${id}/${title},{replace:true})
// 2.携带search参数
Navigate(/home/c1?id${id}title${title},{replace:true})
//3.携带state参数
Navigate(/home/c1,{state:{id,title},replace:true})
注意新版本类组件如果想获取以上三种获取参数的方式要么使用函数组件要么使用高阶组件。
