像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 协议 ,转载请注明出处!