像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 使用