三、路由配置

1. 代码

• RouteWithSubRoute.js：工具类

import React, { Component } from "react";
import { Route } from "react-router-dom";

function RouteWithSubRoute(route) {
    return (
        <Route path={route.path} render={ props => (
            <route.component {...props} routes={route.routes}></route.component>
        )}>
        </Route>
    )
}

export default RouteWithSubRoute;

• App.js：主页，路由配置页面

import React, { Component } from "react";
import { BrowserRouter as Router, Switch, Link } from "react-router-dom";

import User from "./views/User";
import Home from "./views/Home";
import Passord from './views/Passord';
import Userinfo from './views/Userinfo';
import RouteWithSubRoute from './RouteWithSubRoute';

const routes = [
  {
    path: '/home',
    component: Home
  },
  {
    path: '/user',
    component: User,
    routes: [
      {
        path: '/user/password',
        component: Passord
      },
      {
        path: '/user/userinfo',
        component: Userinfo
      }
    ]
  }
];

class App extends Component {
  render() {
    return (
      <Router>
        <div style={{padding: 20}}>
          <nav>
            <ul>
              <li>
                <Link to="/home">Home</Link>
              </li>
              <li>
                <Link to="/user">Users</Link>
              </li>
            </ul>
          </nav>
          <Switch>
            {
              routes.map((route, i) => (
                <RouteWithSubRoute key={i} {...route}></RouteWithSubRoute>
              ))
            }
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;

• User.js

import React, { Component } from "react";
import { Switch, Link } from "react-router-dom";
import RouteWithSubRoute from '../RouteWithSubRoute';

class User extends Component {
  render() {
    let routes = this.props.routes;
    return (
      <div style={{ padding: 20 }}>
        <h2>用户</h2>
        <nav>
          <ul>
            <li>
              <Link to={`/user/password`}>设置密码</Link>
            </li>
            <li>
              <Link to={`/user/userinfo`}>个人信息</Link>
            </li>
          </ul>
        </nav>
        <Switch>
            {
              routes.map((route, i) => (
                <RouteWithSubRoute key={i} {...route}></RouteWithSubRoute>
              ))
            }
        </Switch>
      </div>
    );
  }
}

export default User;

路由配置功能，其实就是对路由功能的进一步封装；把以前静态在代码写死的路由配置，单独提出来，把所有的路由放到一个单独的配置文件中；