41.React学习笔记.react-router-config路由统一管理

使用react-router-config库来进行路由配置。

         // App.js下替换那些Route
        {renderRoutes(routes)}

// src/router/index.js
import Home from "../pages/home"
import About from "../pages/about"
import Profile from "../pages/about"
import User from "../pages/user"

const routes = [
  {
    path: "/",
    exact:true,
    component: Home
  },
  {
    path: "/about",
    component: About
  },
  {
    path: "/profile",
    component: Profile
  },
  {
    path: "/user",
    component: User
  },
]
export default routes;

// about.js
import React, { PureComponent } from 'react'
import { NavLink, Switch, Route } from 'react-router-dom'
import { renderRoutes, matchRoutes } from 'react-router-config'
// import routes from '../router'

export function AboutHistory(props) {
  return 
我出生于1998年，今年22岁
}
export function AboutCulture(props) {
  return 
富强民主文明和谐
}
export function AboutContact(props) {
  return 
联系电话：+86 1111111111
}
export function AboutJoinus(props) {
  return 
投递简历到[email protected]
}
export default class About extends PureComponent {
  render() {
    console.log(this.props.route);
    // const branch = matchRoutes(this.props.route.routes, "/about");
    // console.log(branch);
    return (
      

        企业历史
        企业文化
        联系我们
         this.jumpToJoin()}>加入我们
        {/* 
          
          
          
          
         */}
        {renderRoutes(this.props.route.routes)}
      
    )
  }
  jumpToJoin() {
    this.props.history.push("/about/join");
  }
}

// App.js
import React, { PureComponent } from 'react'
import { renderRoutes } from 'react-router-config'

import routes from "./router";

import {
  BrowserRouter,
  Link,
  Route,
  NavLink,
  Switch,
  withRouter
} from 'react-router-dom'
import Home from './pages/home'
import Profile from './pages/profile'
import About from './pages/about'
import './App.css'
import User from './pages/user'
import NoMatch from './pages/noMatch'
import Login from './pages/login'
import Product from './pages/product'
import Detail from './pages/detail'
import Detail2 from './pages/detail2'
import Detail3 from './pages/detail3'

class App extends PureComponent {
  render() {
    const id = 123;
    const info = { name: "wwq", age: 22, height: 1.88 };
    return (
      

        {/* 首页
          关于
          我的 */}

        {/* 1. NavLink的使用 */}
        {/* 首页
          关于
          我的 */}

        首页
        关于
        我的
        abc
        用户
        {/* 动态路由 */}
        详情
        {/* search传递参数 */}
        详情2
        {/*  */}
        详情3
         this.jumpToProduct()}>商品

        {renderRoutes(routes)}
      
    )
  }
  jumpToProduct() {
    this.props.history.push("/product");
  }
}

export default withRouter(App);

• 在renderRoutes(routes)中做了一个函数的调用，返回值用来替换一大堆Switch。

看看renderRoutes源码

function renderRoutes(routes, extraProps, switchProps) {
  if (extraProps === void 0) {
    extraProps = {};
  }

  if (switchProps === void 0) {
    switchProps = {};
  }

  return routes ? React.createElement(reactRouter.Switch, switchProps, routes.map(function (route, i) {
    return React.createElement(reactRouter.Route, {
      key: route.key || i,
      path: route.path,
      exact: route.exact,
      strict: route.strict,
      render: function render(props) {
        return route.render ? route.render(_extends({}, props, {}, extraProps, {
          route: route
        })) : React.createElement(route.component, _extends({}, props, extraProps, {
          route: route
        }));
      }
    });
  })) : null;
}

exports.matchRoutes = matchRoutes;
exports.renderRoutes = renderRoutes;

其中根元素也为Switch，其中，看是否传入一个reactRoute.route。若有的话，再判断route.render有无来进行相应的render或createElement返回。