react路由嵌套路由及路由传参

• 因为react的嵌套路由跟vue比就像屎一样 不好写 所以在使用的时候建议使用react-router-config来配置路由 会相对轻松

第一步 先安装路由依赖

yarn add react-router-dom --save
yarn add react-router-config --save

第二部 配置路由文件

• 新建一个routes.js文件 新建pages文件夹和home组件about组件及page2组件

    import React from 'react';

    import Home from '../pages/Home'
    import About from '../pages/About'
    import page2 from '../pages/Page2'
    const routes = [
        {
            path: '/',
            component: Home,
            children: [
                {
                    path: '/about',
                    component: About,
                }
            ]
        },
        {
            path: '/page2/:id', //动态路由
            component: page2
        }
    ]

    export {routes}

第三部 在react的index.js中导入路由

    import React from 'react'; // react 基础库
    import ReactDOM from 'react-dom'; // react渲染dom的库
    import './index.css';
    import App from './App';
    import reportWebVitals from './reportWebVitals';
    import {routes} from './router/index'
    import { HashRouter } from 'react-router-dom'
    import { renderRoutes } from 'react-router-config'
    // console.log(renderRoutes)
    ReactDOM.render(
    
    <HashRouter>
        {renderRoutes(routes)}
    </HashRouter>,
    document.getElementById('root')
    );

    // If you want to start measuring performance in your app, pass a function
    // to log results (for example: reportWebVitals(console.log))
    // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
    reportWebVitals();

• home组件的内容

import { Component } from 'react';
import {renderRoutes} from 'react-router-config'
import { Link } from 'react-router-dom'
class Home extends Component {
    constructor(props) {
        super()
        // console.log(props)
        this.state = {
            routes: props.route.children
        }
    }
    render() {
        return (
            <div>
                这是home页面 
                <Link to="/about">进入about页面</Link>
                {renderRoutes(this.state.routes)}
            </div>
        )
    }
}

export default Home

• 这是about页面的内容

    import { Component } from 'react';

    class About extends Component {
        render() {
            return (
                <div>这是about页面</div>
            )
        }
    }

    export default About

react 路由传参的方法

• 跳转开始的页面

    import { Link } from 'react-router-dom'
    import { Component } from 'react';
    class Home extends Component {
        constructor(props) {
            super()
        }
        render() {
            return (
                <div>
                    <Link to={{patename: "定义的路由地址", query: {id: 123}}}>进入about页面</Link>
                </div>
            )
        }
    }

• 跳转进入的页面

    import { Link } from 'react-router-dom'
    import { Component } from 'react';
    class About extends Component {
        constructor(props) {
            super()
        }
        render() {
            console.log(this.props.history.location.query) // 页面获取query参数的方法
            // 如果是动态路由 获取参数的方法 this.props.match.params.key

            return (
                <div>about页面</Link>
                </div>
            )
        }
    }