React 路由配置

路由配置是一組指令，用來告訴 router 如何匹配 URL以及匹配後如何執行代碼。react-router4 不再推薦將所有路由規則放在同一個地方集中式路由，子路由應該由父組件動態配置，組件在哪裡匹配就在哪裡渲染，更加靈活。

用法：

一、在路由配置文件中頭部引入：

importReact,{Component}from"react";

import{ HashRouter,Switch,Route,Redirect }from"react-router-dom";

其中上面 ：import { HashRouter, Switch, Route, Redirect } from "react-router-dom";是導入react-router-dom 文件中的HashRouter, Switch, Route,Redirect四個組件。這種引入文件的方式這要有下面幾種：

1、import defaultcomponent, from "XXX"

eg:import React, from "react";

解釋：導入『react』文件里export的一個默認的組件，將其命名為React以及Component這個非默認組件

2、import defaultcomponent form "XXX"

解釋：導入XXX文件中的默認組件，命名為defaultcomponent

3、import from "XXX"

解釋：導入XXX文件中的a組件

4、import from "XXX"

解釋：導入XXX文件中的a組件，並將其重命名為b

5、import * as a from "XXX"

解釋：導入XXX文件中的所有組件，並將其命名為a，調用具體組件的方式為a.b、a.c。。。但不包含默認組件

2、配置路由

eg:

export default classRouteConfigextendsComponent{

render(){

return(

)

}

}

在主文件中使用路由：

importReactfrom"react";

importReactDOMfrom"react-dom";

importRoutefrom"./router/";

importfrom"react-redux";

import{ AppContainer }from"react-hot-loader";

importstorefrom"@/store/store";

importregisterServiceWorkerfrom"./registerServiceWorker";

import"./style/base.css";

importFastClickfrom"fastclick";

FastClick.attach(document.body);

constrender=Component=>{

ReactDOM.render(

//綁定redux、熱載入

//路由在這裡引入

,

document.getElementById("root"),

)

}

render(Route);

// Webpack Hot Module Replacement API

if(module.hot) {

module.hot.accept("./router/",()=>{

render(Route);

})

}

registerServiceWorker();

3、參數講解

exact用於精準匹配路徑，不用exact也會匹配到匹配的路徑的子路徑，這樣兩個路由組件都會顯示。我們需要的是每次切換隻會顯示一個Route中指定的組件。

Router 與 Route 一樣都是react 組件，它的 history 對象是整個路由系統的核心，它暴露了很多屬性和方法在路由系統中使用；

Route 的 path 屬性表示路由組件所對應的路徑，可以是絕對或相對路徑，相對路徑可繼承；

Redirect 是一個重定向組件，有 from 和 to 兩個屬性；

Route 的 onEnter 鉤子將用於在渲染對象的組件前做攔截操作，比如驗證許可權；

在 Route 中，可以使用 component 指定單個組件，或者通過 components 指定多個組件集合；

param 通過 /:param 的方式傳遞，這種寫法與 express 以及 ruby on rails 保持一致，符合 RestFul 規範；

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！