像Vue一样使用react路由
场景
习惯了vue里面通过配置文件一样来使用路由,react路由跳转和vue一样都是通过对应的跳转组件进行跳转,没啥区别,但是响应url页面的时候,需要使用很多内置的组件来进行书写,有点繁琐,所以记录一下简单的封装一下常用的RouterView组件,来达到像vue一样简单使用
思路
- 将复杂的这部分抽离成一个组件,然后传递需要让路由显示的路由对象就好
- 作为刚入坑react的萌新,需要注意 Link和Switch 要对应在同一个Router下
- 用到的React路由组件:详情见文档
- BrowserRouter:浏览器里使用的路由
- Link:跳转
- Switch:切换显示的组件
- Route:控制url对应的组件
代码
- 使用codesandbox在线ide
- 这里需要注意,每个jsx文件都需要单独引入一下React,不然会报错
// RouterView.jsx import React from "react"; import { Route, Switch } from "react-router-dom"; const RouterView = ({ routes }) => { return ( <Switch> {routes.map((item, i) => { return ( <Route key={i} path={item.path} // 这里传递的为当前路由的子路由 component={() => item.component(item.routes)} /> ); })} </Switch> ); }; export default RouterView;
react路由的基本使用
- 接受参数:useParams
// 路由 const routes=[ { path: "/home/:id", exact: true, label: "首页", component: Home } ] // 组件 import React from "react"; import { useParams } from "react-router-dom"; export default function () { console.log(useParams());//{id:xxx} return <div>Home</div>; }
- 将路由对象信息注入当前组件props:withRouter 使用
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!