0%

像Vue一样使用react路由

场景

习惯了vue里面通过配置文件一样来使用路由,react路由跳转和vue一样都是通过对应的跳转组件进行跳转,没啥区别,但是响应url页面的时候,需要使用很多内置的组件来进行书写,有点繁琐,所以记录一下简单的封装一下常用的RouterView组件,来达到像vue一样简单使用

思路

  • 将复杂的这部分抽离成一个组件,然后传递需要让路由显示的路由对象就好
  • 作为刚入坑react的萌新,需要注意 Link和Switch 要对应在同一个Router下
  • 用到的React路由组件:详情见文档
    • BrowserRouter:浏览器里使用的路由
    • Link:跳转
    • Switch:切换显示的组件
    • Route:控制url对应的组件

代码

  • 使用codesandbox在线ide
  • 这里需要注意,每个jsx文件都需要单独引入一下React,不然会报错
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    // 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
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // 路由
    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 使用