資訊專欄INFORMATION COLUMN
摘要：概述這一章仔細講一講的使用栗子簡單使用源碼簡單使用首頁文章我的首頁文章我的效果帶導航激活效果源碼帶導航效果首頁文章我的首頁文章我的效果說明增強版，如果當前路由命中，將會啟用或者。
0x000 概述
這一章仔細講一講 react-route 的使用栗子
0x001 簡單使用
源碼
import React from "react"
import ReactDom from "react-dom"
import {BrowserRouter, Switch, Route, Link, withRouter} from "react-router-dom"
// 簡單使用
class App extends React.Component {
render() {
return (
首頁
文章
我的
({render: () => 首頁
})}>
({render: () => 文章
})}>
({render: () => 我的
})}>
)
}
}
let MyApp = withRouter(App)
ReactDom.render(
,
document.getElementById("app")
)
效果
0x002 帶導航激活效果
源碼
import React from "react"
import ReactDom from "react-dom"
import {BrowserRouter, Switch, Route, NavLink, withRouter} from "react-router-dom"
import "./App.css"
// 帶導航效果
class App extends React.Component {
render() {
return (
首頁
文章
location.pathname==="/mine"}>我的
({render: () => 首頁
})}>
({render: () => 文章
})}>
({render: () => 我的
})}>
)
}
}
let MyApp = withRouter(App)
ReactDom.render(
,
document.getElementById("app")
)
效果
說明
NavLink: Link增強版，如果當前路由命中，將會啟用activeStyle或者activeClassName。
- activeStyle:?Object: 當鏈接激活的時候的樣式 - activeClassName:?String: 當鏈接激活的時候的樣式類 - isActive?Function: 可以手動判斷該鏈接是否激活，該函數的簽名是：function(match, location):boolean0x003 重定向
源碼
import {BrowserRouter, Switch, Route, NavLink, Redirect, withRouter} from "react-router-dom"
class App extends React.Component {
render() {
return (
首頁
文章
我的
({render: () => 首頁
})}>
({render: () => 文章
})}>
({render: () => 我的
})}>
)
}
}
```
效果
當我們訪問http://localhost:8081/時，會自動跳轉到http://localhost:8081/index
源碼
import {BrowserRouter, Switch, Route, NavLink, withRouter} from "react-router-dom"
class App extends React.Component {
render() {
return (
首頁
文章
我的
({render: () => 首頁
})}>
({render: () => 文章
})}>
({render: () => 我的
})}>
({render: () => 未找到這個頁面
})}/>
)
}
}
效果
0x005 url傳參
源碼
import {BrowserRouter, Switch, Route, NavLink, withRouter} from "react-router-dom"
class Article extends React.Component{
render(){
return({this.props.match.params.id}
)
}
}
class App extends React.Component {
render() {
return (
首頁
文章1
文章2
我的
({render: () => 首頁
})}>
({render: () => 我的
})}>
)
}
}
效果
說明
聲明Route的時候使用:${name}表示要作為動態參數，之后可以通過this.props.match.params.${name}獲取
源碼
class Article extends React.Component{
render(){
console.log(this)
return(文章 id:{this.props.location.state.id}
)
}
}
class App extends React.Component {
render() {
return (
)
}
}
效果
說明：
跳轉：this.props.history.push(path:String,data:?Object)
獲取參數：this.props.location.state
0x007 何時使用Switch做個試驗，假設我們有兩個路由：
class App extends React.Component {
render() {
return (
article
}>:name
}>
此時看效果
會發現兩個都命中了，這個時候可以使用Switch，他只會命中第一個命中的路由
class App extends React.Component {
render() {
return (
article
}>
:name
}>
)
}
}
命中/article
命中/:name
源碼
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98217.html
摘要：的全稱是統一資源定位符英文，可以這么說，是一種標準，而網址則是符合標準的一種實現而已。渲染器，將組件渲染到頁面上。 0x000 概述 從這一章開始就進入路由章節了，并不直接從如何使用react-route來講，而是從路由的概念和實現來講，達到知道路由的本質，而不是只知道如何使用react-route庫的目的，畢竟react-route只是一個庫，是路由的一個實現而已，而不是路由本身。 ...
摘要：概述上一章使用的是自己實現的，當然已經有現成的庫給我們用了，那就是?？偨Y看透它，然后掌握它資源源碼 0x000 概述 上一章使用的是自己實現的route，當然已經有現成的庫給我們用了，那就是react-route。 0x001 history Api說明 在說這個庫之前，得先對history新的api做一個了解 window.history.pushState(data,title...
摘要：概述這一章終于大集成了集成源碼效果說明集成主要是用到庫集成源碼效果說明主要用到庫，是針對庫在環境下的封裝組件，注入等屬性接管跟組件指定路由和組件的對應關系集成源碼引入相關的包和鏈接組件效果說明主要用到庫都是用的接 0x000 概述 這一章終于大集成了 0x001 集成react 源碼 import React from react import ReactDom from rea...
摘要：通過聲明式編程模型定義組件，是最強大的核心功能。無論是的瀏覽器書簽，還是的導航功能，只要是可以使用的地方，就可以使用。二級路由使用渲染組件屬性狀態請選擇一個主題。也許是最佳小實踐地址，覺得有幫助的話，請點擊一下，嘿嘿 小前言 這是一個小小的有關react的小例子，希望通過一個小例子，可以讓新手更好的了解到react、react-router4.0、redux的集中使用方法。 這是基...
閱讀 724·2023-04-25 19:43
閱讀 3921·2021-11-30 14:52
閱讀 3794·2021-11-30 14:52
閱讀 3859·2021-11-29 11:00
閱讀 3790·2021-11-29 11:00
閱讀 3883·2021-11-29 11:00
閱讀 3562·2021-11-29 11:00
閱讀 6138·2021-11-29 11:00
