1. 程式人生 > >react專案—路由和巢狀子路由(react-router4.0)

react專案—路由和巢狀子路由(react-router4.0)

前言:在做專案的時候,花費了幾天的時間才把路由問題解決,但是對react的幾種路由的區分和使用,我現在也是整的還不清楚。

1、安裝相關的包:

(1)npm install --save-dev react-router

(2)npm install --save-dev react-router-dom

(3)npm install --save react-router-config

在package.json中檢視版本

         

2、配置路由

(1)新建路由檔案 route.js

          

程式碼如下所示:

import React from 'react';

import FyOfficalHomePage from './components/FyOfficalHomePage/FyOfficalHomePage';

import FyAdvantage from './components/FyAdvantage/FyAdvantage';
import FyAdvantageOne from './components/FyAdvantage/FyAdvantageOne/FyAdvantageOne';
import FyAdvantageTwo from './components/FyAdvantage/FyAdvantageTwo/FyAdvantageTwo';
import FyAdvantageThree from './components/FyAdvantage/FyAdvantageThree/FyAdvantageThree';

import FyCommonProblem from './components/FyCommonProblem/FyCommonProblem';

import FyCompanyPosition from './components/FyCompanyPosition/FyCompanyPosition';

const routes = [
    {
        path: '/',
        component: FyOfficalHomePage,
        exact: true,
    },
    {
        path: '/advantage',
        component: FyAdvantage,
        children: [
            {
                path: '/advantage/advantage1',
                component: FyAdvantageOne
            },
            {
                path: '/advantage/advantage2',
                component: FyAdvantageTwo
            },
            {
                path: '/advantage/advantage3',
                component: FyAdvantageThree
            }
        ]
    },
    
    {
        path: '/faq',
        component: FyCommonProblem
    },
    {
        path: '/map',
        component: FyCompanyPosition
    },
];

export {routes}

:(1)exact:

                是Route下的一條屬性,一般而言,react路由會匹配所有匹配到的路由組價,exact能夠使得路由的匹配更嚴格一些。

                值為bool型,為true是表示嚴格匹配,為false時為正常匹配。

                如在exact為true時,’/link’與’/’是不匹配的,但是在false的情況下它們又是匹配的。

       (2)巢狀子路由children,這裡說明一下不一定必須用children,你可以用其它的詞代替。但是我個人覺得,children辨識度                  高,在後面使用的時候也不會搞混。

(2)index.js檔案

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

import registerServiceWorker from './registerServiceWorker';

import { routes } from './routes';
import { BrowserRouter } from 'react-router-dom';
import { renderRoutes } from 'react-router-config';

ReactDOM.render(
    (<BrowserRouter>
        {renderRoutes(routes)}
    </BrowserRouter>),
    document.getElementById('root')
);
registerServiceWorker();

(3)元件中使用

import React from 'react';
import { Link } from 'react-router-dom';

export default class NavigationBar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    
    render (){
        return(
            <div>
                <ul>
                    <li>
                        <Link to="/">首頁</Link>
                    </li>
                    <li>
                        <Link to="/advantage">advantage</Link>
                    </li>
                </ul>
            </div>    
        )
    
    }
}

子路由(子頁面):

import React from 'react';
import { Link } from 'react-router-dom';
import { renderRoutes } from 'react-router-config'

export default class FyAdvantage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            route: props.route,
        }
    }

    render (){
        const route = this.state.route;
        return(
             <div>
                {renderRoutes(route.children)}
                <div>
                    <ul>
                        <li>
                            <Link to="/advantage/advantage1">advantage1</Link>
                        </li>
                        <li>
                            <Link to="/advantage/advantage2">advantage2</Link>
                        </li>
                        <li>
                            <Link to="/advantage/advantage3">advantage3</Link>
                        </li>
                    </ul>
                </div>
            </div>    
        )
    }
}

注:(1)接受通過props傳過來的route

       (2){renderRoutes(route.children)}是子頁面的入口,子頁面是在原來的頁面的基礎載入的,

                例:A是父頁面,B和C是A的子頁面。B、C是A的一部分,在載入B或C頁面的時候,父頁面A的內容依然存在,B或C                       的頁面內容通過入口渲染在A頁面中。