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 <h2>我出生于1998年，今年22岁</h2>
}
export function AboutCulture(props) {
  return <h2>富强民主文明和谐</h2>
}
export function AboutContact(props) {
  return <h2>联系电话：+86 1111111111</h2>
}
export function AboutJoinus(props) {
  return <h2>投递简历到abcd@123.com</h2>
}
export default class About extends PureComponent {
  render() {
    console.log(this.props.route);
    // const branch = matchRoutes(this.props.route.routes, "/about");
    // console.log(branch);
    return (
      <div>
        <NavLink exact to="/about" activeClassName="about-active">企业历史</NavLink>
        <NavLink exact to="/about/culture" activeClassName="about-active">企业文化</NavLink>
        <NavLink exact to="/about/contact" activeClassName="about-active">联系我们</NavLink>
        <button onClick={e => this.jumpToJoin()}>加入我们</button>
        {/* <Switch>
          <Route exact path="/about" component={AboutHistory} />
          <Route path="/about/culture" component={AboutCluture} />
          <Route path="/about/contact" component={AboutContact} />
          <Route path="/about/join" component={AboutJoinus} />
        </Switch> */}
        {renderRoutes(this.props.route.routes)}
      </div>
    )
  }
  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 (
      <div>
        {/* <Link to="/">首页</Link>
          <Link to="/about">关于</Link>
          <Link to="/profile">我的</Link> */}

        {/* 1. NavLink的使用 */}
        {/* <NavLink exact to="/" activeStyle={{ color: "red", fontSize: "30px" }}>首页</NavLink>
          <NavLink to="/about" activeStyle={{ color: "red", fontSize: "30px" }}>关于</NavLink>
          <NavLink to="/profile" activeStyle={{ color: "red", fontSize: "30px" }}>我的</NavLink> */}

        <NavLink exact to="/" activeClassName="link-active">首页</NavLink>
        <NavLink to="/about" activeClassName="link-active">关于</NavLink>
        <NavLink to="/profile" activeClassName="link-active">我的</NavLink>
        <NavLink to="/abc" activeClassName="link-active">abc</NavLink>
        <NavLink to="/user" activeClassName="link-active">用户</NavLink>
        {/* 动态路由 */}
        <NavLink to={`/detail/${id}`} activeClassName="link-active">详情</NavLink>
        {/* search传递参数 */}
        <NavLink to={`/detail2?name=wwq&age=18`} activeClassName="link-active">详情2</NavLink>
        {/*  */}
        <NavLink to={{
          pathname: "/detail3",
          search: "?name=abc",
          state: info
        }} activeClassName="link-active">详情3</NavLink>
        <button onClick={e => this.jumpToProduct()}>商品</button>

        {renderRoutes(routes)}
      </div>
    )
  }
  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返回。