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>

            )

        }

    }