React学习20----react-router4.x中实现路由模块化，以及嵌套路由父子组件传值

Z时代
2024-01-10
分类：综合

react

把
https://blog.csdn.net/zhaihaohao1/article/details/87966970

中的路由封装成模块

使用起来更加方便：
封装1：

把路由定义成一个数组 routes

配置的时候循环数组，配置

如下：

App.js

import React, { Component } from 'react';
import logo from './assets/images/logo.svg';
import './assets/css/App.css';
import Home from "./components/Home";
import Shop from "./components/Shop";
import User from "./components/User";
import {BrowserRouter as Router, Route, Link} from "react-router-dom";
// 定义数组中定义一个路由对象，配置路由
let routes =[
  {
    path :'/',
    component:Home,
    exact:true,
  },
  {
    path :'/user',
    component:User,
  },
  {
    path :'/shop',
    component:Shop,
  },
]
class App extends Component {
  render() {
    return (
        <Router>
          <div>
            {/*上面显示两个标题*/}
            <header className="title">
              <Link to="/">首页组件</Link>
              <Link to="/user">用户页面</Link>
              <Link to="/shop">商户页面</Link>
            </header>
            {/*循环配置路由*/}
            {
              routes.map( (value,key)=> {
                //判断默认路由
                if (value.exact){
                  return <Route key={key} exact path={value.path} component={value.component}/>;
                } else{
                  return <Route key={key} path={value.path} component={value.component}/>;
                }
              })
            }
          </div>
        </Router>
    );
  }
}
export default App;

源码下载：

rdemo20
https://download.csdn.net/download/zhaihaohao1/10980497

封装2：

在上面的基础上，把数组单独抽出来，写成一个模块 router.js

在APP.js 中，循环数组配置路由

项目结构：

router.js


import Home from '../components/Home';
import User from '../components/User';
import Shop from '../components/Shop';
/**
 * 模块化配置路由
 * @type {*[]}
 */
let routes = [
    {
      path: "/",
      component: Home,
      exact:true
    },
    {
      path: "/shop",
      component: Shop
    },
    {
      path: "/user",
      component: User
    },
];
export default routes;

App.js

import React, { Component } from 'react';
import './assets/css/App.css';
import {BrowserRouter as Router, Route, Link} from "react-router-dom";
import routes from './model/router.js';
class App extends Component {
  render() {
    return (
        <Router>
          <div>
            {/*上面显示两个标题*/}
            <header className="title">
              <Link to="/">首页组件</Link>
              <Link to="/user">用户页面</Link>
              <Link to="/shop">商户页面</Link>
            </header>
            {/*循环配置路由*/}
            {
              routes.map( (value,key)=> {
                //判断默认路由
                if (value.exact){
                  return <Route key={key} exact path={value.path} component={value.component}/>;
                } else{
                  return <Route key={key} path={value.path} component={value.component}/>;
                }
              })
            }
          </div>
        </Router>
    );
  }
}
export default App;

源码下载：

rdemo20_2
https://download.csdn.net/download/zhaihaohao1/10980497
封装3

在上面的基础上

嵌套路由的配置

router.js 中把路由嵌套起来

App.js循环配置，并把子路由传给 User.js

User.js 接收到App.js传过来的路由循环配置

就是对
https://blog.csdn.net/zhaihaohao1/article/details/87966970

的封装

router.js

import Shop from '../components/Shop';
import Home from '../components/Home';
import User from '../components/User';
import UserList from '../components/User/UserList';
import UserAdd from '../components/User/UserAdd';
import UserEdit from '../components/User/UserEdit';
/**
 * 模块化，配置嵌套路由
 * 
 */
let routes = [
    {
        path: "/",
        component: Home,
        exact:true
    },
    {
        path: "/shop",
        component: Shop
    },
    {
        path: "/user",
        component: User,
        /*嵌套路由*/
        routes:[
            {
                path: "/user/",
                component: UserList
            },
            {
                path: "/user/add",
                component: UserAdd
            },
            {
                path: "/user/edit",
                component: UserEdit
            }
        ]
    },
];
export default routes;

App.js

import React, {Component} from 'react';
import './assets/css/App.css';
import {BrowserRouter as Router, Route, Link} from "react-router-dom";
import routes from './model/router.js';
class App extends Component {
    render() {
        return (
            <Router>
                <div>
                    {/*上面显示两个标题*/}
                    <header className="title">
                        <Link to="/">首页组件</Link>
                        <Link to="/user">用户页面</Link>
                        <Link to="/shop">商户页面</Link>
                    </header>
                    {/*循环配置路由*/}
                    {
                        routes.map((route, key) => {
                            if (route.exact) {
                                return <Route key={key} exact path={route.path}
                                     // route.component     value.component
                                    //  下面的代码，相当于 <User  {...props}  routes={route.routes} />
                                    //  route.routes 把值传给 User 组件
                                              render={props => (
                                                  // pass the sub-routes down to keep nesting
                                                  <route.component {...props} routes={route.routes}/>
                                              )}
                                />
                            } else {
                                return <Route key={key} path={route.path}
                                              render={props => (
                                                  // pass the sub-routes down to keep nesting
                                                  <route.component {...props} routes={route.routes}/>
                                              )}
                                />
                            }
                        })
                    }
                </div>
            </Router>
        );
    }
}
export default App;

User.js

import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Link} from "react-router-dom";
class User extends Component {
    constructor(props) {
        super(props);
        this.state = {
            msg: '我是一个User组件'
        };
    }
    componentWillMount() {
        //App.js 拿到传过来的值
        console.log(this.props.routes);
    }
    render() {
        return (
            <div className="user">
                <div className="content">
                    <div className="left">
                        <Link to="/user/">用户列表</Link>
                        <br/>
                        <br/>
                        <Link to="/user/add">增加用户</Link>
                        <br/>
                        <br/>
                        <Link to="/user/edit">编辑用户</Link>
                    </div>
                    <div className="right">
                        {
                            //App.js 拿到传过来的值,并循环配置路由
                            this.props.routes.map((route, key) => {
                                return <Route key={key} exact path={route.path} component={route.component}/>
                            })
                        }
                        {/* <Route  path="/user/add" component={UserAdd} /> */}
                    </div>
                </div>
            </div>
        );
    }
}
export default User;