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>
            )
        }
    }