五分鐘教你瞭解一下react路由知識
阿新 • • 發佈：2021-09-26
目錄
- 什麼是路由
- 純元件的基本使用
- 純元件使用的注意點
- 路由的基本初體驗
- HashRouter和BrowserRouter
- Link元件和NavLink元件
- Route和Switch元件
- 路由傳參
什麼是路由
簡單的說就是根據不同的地址，web伺服器處理不同的業務以及邏輯。
以下程式碼全部執行在react腳手架中
純元件的基本使用
// 元件更新機制:
// 只要父元件重新渲染了,所有的元件子樹,也會更新
// 效能優化
// 1. 減輕state
// 2. 避免不必要的重新渲染 (效能優化)
// shouldComponentUpdate(nextProps,nextState) { .... }
// 鉤子函式返回一個布林值,true要更新 false不更新
// 手動實現固然是可以的,但是太麻煩
// 3. 實際官網提供了一個純元件,內部已經幫你實現好了 shouldComponentUpdate 的邏輯
// 會幫你進行props 和 state的比對,決定是否要更新
// 普通元件: class App extends React.Component
// 純元件: class App extends React.PureComponent 會比普通元件,多一個比對資料的過程
// 比如: 一個元件要渲染出來,效能損耗很大,此時可以考慮純元件,避免掉一些無意義的更新
// 不是所有的場景,都要用純元件,正常應該都用普通元件
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.PureComponent {
state = {
nameList: ['帥鵬','呂布','張飛'],currentName: '',}
render() {
console.log('App-render')
return (
<div>
<h1>我是App元件</h1>
<h3>結果: {this.state.currentName}</h3>
<button onClick={this.handleClick.bind(this)}>點名</button>
</div>
)
}
handleClick() {
const randomIndex = parseInt(Math.random() * this.state.nameList.length)
const currentName = this.state.nameList[randomIndex]
this.setState({
currentName,})
console.log(currentName)
}
// 需求: 如果state的值,沒有發生變化,其實也不需要更新,避免一些不必要的更新
// shouldComponentUpdate(nextProps,nextState) {
// if (this.state.currentName === nextState.currentName) {
// return false
// } else {
// return true
// }
// }
}
ReactDOM.render(<App></App>,document.getElementById('root'))
純元件使用的注意點
// 4. 純元件的使用注意點 (如果純元件有子元件,子元件也要是純元件 (一家子都純))
// (1) 純元件內部進行的是淺層對比,值型別沒有問題,複雜型別只比較地址
// (2) 使用純元件,更新資料時,簡單型別沒有問題,複雜型別更新了,是需要修改地址的(新物件 / 新陣列)
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.PureComponent {
state = {
nameList: ['帥鵬',obj: {
name: 'zs',age: 18,},}
render() {
console.log('App-render')
return (
<div>
<h1>我是App元件</h1>
<p>name: {this.state.obj.name}</p>
<p>{this.state.namwww.cppcns.com 路由的基本初體驗
import React from 'react'
import ReactDOM from 'react-dom'
import { HashRouter,Link,Route } from 'react-router-dom'
// 路由的使用:
// 1. 下載 yarn add react-router-dom
// 2. react-router-dom是一個包,包含了很多的元件
// 3. HashRouter元件,是整個的路由物件,一個專案就一個,需要將整個專案的內容包裹
// 4. Link元件,渲染成一個 a 連結,可以用於路由跳轉,通過 to 配置路徑
// 5. Route元件,配置路由規則(哪個路徑匹配哪個元件),也是路由出口!
// 每個Route互相之間是獨立的,只要路徑匹配,就可以展示配置的元件
// 定義了三個函式元件
const Home = () => <div>我是Home元件</div>
const Login = () => <div>我是Login元件</div>
const User = () => <div>我是User元件</div>
class App extends React.PureComponent {
render() {
return (
<div>
<h1>我是App元件</h1>
<ul>
<li>
<Link to="/home">首頁</Link>
</li>
<li>
<Link to="/login">登入</Link>
</li>
<li>
<Link to="/user">使用者</Link>
</li>
</ul>
{/* 只要path路徑,和位址列的路徑匹配,就會展示配置的元件 */}
<Route path="/home" component={Home}></Route>
<Route path="/login" component={Login}></Route>
<Route path="/user" component={User}></Route>
</div>
)
}
}
ReactDOM.render(
<HashRouter>
<App></App>
</HashRouter>,document.getElementById('root')
)
HashRouter和BrowserRouter
import React from 'react'
import ReactDOM from 'react-dom'
import { HashRouter as Router,Route } from 'react-router-dom'
// Router元件,有兩種 HashRouter,BrowserRouter
// 1. HashRouter底層實現基於: 位址列的hash值,基於錨點跳轉實現的
// 2. BrowserRouter底層實現基於: h5 的 history API,位址列沒有 #
// (如果要用開發時,沒有問題,但是上線了,是需要後臺配置的)
// 定義了三個函式元件
const Home = () => <div>我是Home元件</div>
const Login = () => <div>我是Login元件</div>
const User = () => <div>我是User元件</div>
class App extends React.PureComponent {
render() {
return (
<div>
<h1>我是App元件</h1>
<ul>
<li>
<Link to="/home">首頁</Link>
</li>
<li>
<Link to="/login">登入</Link>
</li>
<li>
<Link to="/user">使用者</Link>
</li>
</ul>
{/* 只要path路徑,就會展示配置的元件 */}
<Route path="/home" component={Home}></Route>
<Route path="/login" component={Login}></Route>
<Route path="/user" component={User}></Route>
</div>
)
}
}
ReactDOM.render(
<Router>
<App></App>
</Router>,document.getElementById('root')
)
Link元件和NavLink元件
import React from 'react'
import ReactDOM from 'react-dom'
import { HashRouter as Router,NavLink,Route } from 'react-router-dom'
import './index.'
// Link元件 和 NavLink元件
// 1. Link元件,渲染成a連結,用於路由跳轉,通過to配置路徑
// 預設的Link,不會有高亮的類名標識
// 2. NavLink元件,通過to配置路徑
// (1) NavLink,在路徑匹配時,會有高亮的類名 active
// (2) 可以通過activeClassName,配置高亮的類名
// (3) 可以通過activeStyle,直接配置改標籤,高亮的樣式
// (4) 進行的是模糊匹配 to="/home" 可以匹配 /home /home/aa
// 精確匹配,需要配置 exact 屬性,to="/home",只能匹配 /home,只會在 /home 時高亮
// 定義了三個函式元件
const Home = () => <div>我是Home元件</div>
const Login = () => <div>我是Login元件</div>
const User = () => <div>我是User元件</div>
class App extends React.PureComponent {
render() {
return (
<div>
<h1>我是App元件</h1>
<ul>
<li>
<NavLink
exact
to="/"
activeStyle={{ color: 'red',fontSize: '30px' }}
>
首頁
</NavLink>
</li>
<li>
<NavLink to="/login" activeClassName="selected">
登入
</NavLink>
</li>
<li>
<NavLink to="/user" activeClassName="selected">
使用者
</NavLink>
</li>
</ul>
{/* 只要path路徑,document.getElementById('root')
)
/**index.css*/
.active {
color: red;
font-size: 30px;
}
.selected {
color: blue;
font-size: 30px;
}
Route和Switch元件
import React from 'react'
import ReactDOM from 'react-dom'
import { HashRouter as Router,Route,Switch } from 'react-router-dom'
import './index.css'
// Route元件
// 作用: 可以配置路由規則,也是路由的出口,只要路徑匹配了,那麼配置的元件,就會在這裡展示
// <Route path="/login" component={Login}></Route>
// 1. 每個Route之間,互相是獨立的 (包括配置多個相同路徑,顯示不同元件,也是可以的)
// 2. Route配置的路徑,也是進行的模糊匹配,可以通過 exact 進行精確匹配
// 3. 如果不配置路徑,預設都會展示
// 會配合Switch元件,可以完成404頁面的配置
// Switch元件: 可以將多個Route元件包裹,可以讓第一個匹配的Route元件展示,後續的不管
// 定義了函式元件
const Home = () => <div>我是Home元件</div>
const Login = () => <div>我是Login元件</div>
const User = () => <div>我是User元件</div>
const Error = () => <div>我是404頁面,您要訪問的頁面不存在!!!</div>
class App extends React.PureComponent {
render() {
return (
<div>
<h1>我是App元件</h1>
<ul>
<li>
<NavLink
exact
to="/"
activeStyle={{ color: 'red',就會展示配置的元件 */}
<Switch>
<Route path="/" component={Home} exact></Route>
<Route path="/login" component={Login}></Route>
<Route path="/user" component={User}></Route>
<Route component={Error}></Route>
</Switch>
</div>
)
}
}
ReactDOM.render(
<Router>
<App></App>
</Router>,document.getElementById('root')
)
巢狀路由
import React from 'react'
import ReactDOM from 'react-dom'
import {
HashRouter as Router,Switch,Redirect,} from 'react-router-dom'
import './index.css'
// Redirect元件: 可以重定向,from從哪 to跳到哪
// react中,配置巢狀路由,非常的簡單,你只需要在需要寫巢狀子路由的地方,直接寫Route元件即可
// 前提條件,你配置的巢狀子路由,路徑一定要包含父路由的路徑
// 定義了函式元件
const Home = () => (
<div>
<h3>我是Home元件</h3>
</div>
)
const Login = () => (
<div>
<h3>我是Login元件</h3>
</div>
)
// ------------------------------------------------------------------------
// 需求: 使用者User元件內部,還有個人資訊,我的收藏
const User = () => (
<div>
<h3>我是User元件</h3>
<Route path="/user" exact component={UserDefault}></Route>
<Route path="/user/info" component={Info}></Route>
<Route path="/user/star" component={Star}></Route>
</div>
)
const UserDefault = () => <div>我是預設的User內容</div>
const Info = () => <div>我是Info元件</div>
const Star = () => <div>我是Star元件</div>
// -------------------------------------------------------------------------
const Error = () => <div>我是404頁面,就會展示配置的元件 */}
<Switch>
<Route path="/" component={Home} exact></Route>
<Redirect from="/home" to="/"></Redirect>
<Route path="/login" component={Login}></Route>
<Route path="/user" component={User}></Route>
<Route component={Error}></Route>
</Switch>
</div>
)
}
}
ReactDOM.render(
<Router>
<App></App>
</Router>,document.getElementById('root')
)
路由傳參
import React from 'react'
import ReactDOM from 'react-dom'
import { HashRouter as Router,Link } from 'react-router-dom'
import './index.css'
// 如果想拿到動態路由的引數資訊,需要通過props獲取,// Route會將路由相關資訊,相關方法,都會通過 props 傳給你的元件
// const Product = (props) => <div>我是product元件</div>
class Product extends React.Component {
render() {
// this.props 引數
// (1) history 裡面存放的是跳轉路由的方法
// (2) location 裡面存放的是當前路由地址
// (3) match 裡面存放的是動態路由引數
console.log(this.props)
console.log(this.props.match.params.id)
return (
<div>
<h3>我是product元件 - {this.props.match.params.id}</h3>
<button onClick={this.handleClick.bind(this)}>回首頁</button>
</div>
)
}
handleSCOmhdnxClick() {
// console.log(this.props.history)
// this.props.history.go(-1)
this.props.history.push('/home')
}
}
const Home = () => <div>我是首頁</div>
class App extends React.Component {
render() {
return (
www.cppcns.com <div>
<h1>我是App元件</h1>
<div>
<Link to="/home">首頁</Link>
<Link to="/product/1">商品1</Link>
<Link to="/product/2">商品2</Link>
<Link to="/product/3">商品3</Link>
<Link to="/product/4">商品4</Link>
</div>
<Route path="/product/:id" component={Product}></Route>
<Route path="/home" component={Home}></Route>
</div>
)
}
}
ReactDOM.render(
<Router>
<App></App>
</Router>,document.getElementById('root')
)
到此這篇關於五分鐘教你瞭解一下react路由知識的文章就介紹到這了,更多相關react路由內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！