React路由封装（类似vue）

vue写多了，使用react-route反而有点不适应了，今天我们就封装一个类似于vue的react-route

安装

npm install react-router-dom

新建route文件

在根目录新建route --> index   与 route--->routes

routes文件存放内容为所有的路由信息

import Login from "../views/login/login";
import Home from "../views/home/home";
// 动态加载自己百度改吧  GG
const routes = [
  {
    path: '/',
    meta: {
      title: '登录',
    },
    component: Login,
  },
  {
    path: '/home',
    meta: {
      title: '首页',
    },
    component: Home,
  },
  {
    path: '/login',
    meta: {
      title: '登录',
    },
    component: Login,
  }
]

export default routes

index文件进行路由封装

import React, { Component } from 'react'
import { Route, BrowserRouter, Switch } from 'react-router-dom'
import routes from './routes';
const setTitle = (title) => {
  document.title = title;
}
export default class RouterView extends Component {
  render() {
    return (
      // 建议使用 HashRouter
      <BrowserRouter >
        <Switch>
          {routes.map((item, index) => {
            const { path, component } = item
            return (<Route
              path={path}
              key={index}
              exact
              component={component}
              onEnter={setTitle(item.meta.title)}
            />)
          })}
        </Switch>
      </BrowserRouter>
    )
  }
}

最后引入使用

在src/index引入路由信息

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/reset.css'

import reportWebVitals from './reportWebVitals';
import RouterView from './router/index'

// 引入路由配置表
ReactDOM.render(
  <RouterView />,
  document.getElementById('root')
);
reportWebVitals();

简单的路由封装及使用，希望能帮到您